<div id="dragger" ref="draggerRef"></div>

这里的ref属性很关键，它能让我们在Vue实例中方便地获取到这个元素。

接下来是CSS部分，为了让元素能够呈现出可拖拽的样式，我们需要为其设置一些样式属性。比如设置合适的宽度、高度、背景颜色以及cursor属性为pointer，让鼠标悬停时呈现出小手的样式，提示用户可以进行拖拽操作。

#dragger {
    width: 10px;
    height: 200px;
    background-color: #ccc;
    cursor: pointer;
}

最重要的部分来了，在Vue的script中，我们要实现具体的拖拽逻辑。通过获取元素的引用，监听鼠标的相关事件，如mousedown、mousemove和mouseup事件。 在mousedown事件中，我们记录下鼠标按下时的初始位置以及元素的初始宽度。

export default {
    data() {
        return {
            startX: 0,
            initialWidth: 0
        }
    },
    methods: {
        onDragStart(event) {
            this.startX = event.pageX;
            this.initialWidth = this.$refs.draggerRef.offsetWidth;
            document.addEventListener('mousemove', this.onDragMove);
            document.addEventListener('mouseup', this.onDragEnd);
        },
        onDragMove(event) {
            const diffX = event.pageX - this.startX;
            const newWidth = this.initialWidth + diffX;
            this.$refs.draggerRef.style.width = newWidth + 'px';
        },
        onDragEnd() {
            document.removeEventListener('mousemove', this.onDragMove);
            document.removeEventListener('mouseup', this.onDragEnd);
        }
    },
    mounted() {
        this.$refs.draggerRef.addEventListener('mousedown', this.onDragStart);
    }
}

通过上述代码，我们实现了基于Vue的鼠标拖拽控制宽度功能。用户在页面上按下鼠标并移动时，元素的宽度会随之动态变化，松开鼠标后，拖拽操作结束。这种交互效果在很多场景下都非常实用，比如自定义布局、调整元素大小等。通过不断优化和扩展代码，还能实现更复杂、更美观的拖拽效果，为用户带来更优质的交互体验。