В данном случае для изменения размеров всплывающего блока (div) влево по горизонтали захватывая его левую границу без использования свойства `resize`, можно применить подход, сочетающий JavaScript и Vue, чтобы управлять действиями пользователя и обновлением DOM соответственно.
Мы можем создать компонент Vue, который будет реагировать на события мыши, такие как `mousedown`, `mousemove` и `mouseup`, для ручного управления размером элемента. Вот пример такого компонента:
```html
<template>
<div>
<div
:style="{ width: divWidth + 'px' }"
class="resizeable-div"
@mousedown="initResize"
>
<!-- Содержимое блока -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
divWidth: 200, // Начальная ширина блока
resizing: false,
startX: 0
};
},
methods: {
initResize(event) {
// Начать изменение размеров
this.resizing = true;
this.startX = event.clientX;
this.divWidth = this.$el.firstChild.clientWidth; // Текущая ширина блока
document.addEventListener('mousemove', this.resize);
document.addEventListener('mouseup', this.stopResize);
},
resize(event) {
// Изменение ширины блока
if (this.resizing) {
let currentWidth = this.divWidth + (this.startX - event.clientX);
this.divWidth = Math.max(currentWidth, 50); // Минимальная ширина блока
}
},
stopResize() {
// Остановить изменение размеров
if(this.resizing) {
this.resizing = false;
document.removeEventListener('mousemove', this.resize);
document.removeEventListener('mouseup', this.stopResize);
}
}
}
};
</script>
<style>
.resizeable-div {
background: #f0f0f0;
cursor: ew-resize;
}
</style>
```
Как это работает:
1. Компонент определяет ширину блока через `divWidth`, который вы можете привязать с помощью `v-bind:style`, чтобы установить желаемую ширину элемента.
2. Обработчик `initResize` инициируется при нажатии кнопки мыши на блоке (`mousedown`).
3. Во время `mousedown`, происходит подписка на события `mousemove` и `mouseup` на `document`, чтобы мы могли отслеживать движение мыши за пределами блока.
4. Обработчик `resize`, вызываемый при событии `mousemove`, изменяет ширину блока в зависимости от смещения курсора.
5. Когда кнопка мыши отпускается, обработчик `stopResize` вызывается, который останавливает процесс изменения размера и удаляет обработчики `mousemove` и `mouseup` с `document`.
Это решение использует Vue для реактивности и обновления DOM, а также нативные события JavaScript для взаимодействия с мышью. В результате вы получаете плавное и контролируемое изменение размера элемента без использования свойства `resize` CSS.
Убедитесь, что в вашем приложении Vue позволяется обработка событий DOM вне экземпляра Vue. Если глобальная подписка на события создаёт нежелательные эффекты, рассмотрите использование локальных обработчиков или директив Vue, таких как `v-on`.