本文介绍了如何使用 Vue.js 实现了一个可拖动的 XDragHandle 组件，当鼠标移动时，通过监听 mouseMove 事件计算并触发 'menuWidthChange' 方法，实时调整菜单宽度，确保在限定范围内。
<template>
<div class="x-handle" unselectable="on" onselectstart="return false" @mousedown="mouseDown"></div>
</template>
<script>
export default {
name: 'XDragHandle',
data() {
return {
lastX: '',
}
},
created() {
document.addEventListener('mouseup', this.mouseUp)
},
destroyed() {
document.removeEventListener('mouseup', this.mouseUp)
},
methods: {
mouseUp() {
this.lastX = ''
document.removeEventListener('mousemove', this.mouseMove)
},
mouseDown(event) {
document.addEventListener('mousemove', this.mouseMove)
this.lastX = event.screenX
},
mouseMove(event) {
console.log('move')
this.$emit('widthChange', this.lastX - event.screenX)
this.lastX = event.screenX
},
},
}
</script>
<style lang="scss" scoped>
.x-handle {
width: 2px;
cursor: w-resize;
z-index: 10;
background-color: #f1f4f9;
}
</style>
----------------------------------------------------------------------------------------
menuWidthChange(movement) {
this.menuWidth -= movement
if (this.menuWidth < 150) {
this.menuWidth = 150
}
if (this.menuWidth > 600) {
this.menuWidth = 600
}
},
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
