摘要：
事实上，这不是表单的边界，而是一个单独的组件。监视鼠标的向下、移动和向上事件exportdefault｛name:“XHandle”，data（）｛return｛lastX:“”｝；｝，created（）{document.addEventListener；}，destroyed（）{document.removeEventListener，}，方法：{mouseDown｛document.addEvent Listener；this.lastX=event.screenX；}，mouseMove｛this.$emit；this.lastX=event.screenX，console.log；｝，mouseUp（）{this.lastX=“”；document.removeEvent Listener，｝｝；。x-handle｛2px；cursor:w-resize；z-index:10；background:#ccc；｝侦听事件，此$Emit将值传递给父组件。父组件动态修改需要通过传递的值更改其宽度的元素。这两个元素的弹性布局相当于手柄组件将粘贴到我们需要拖动的元素上。我们似乎在拖动要更改宽度的元素，但实际上是在拖动我们的控制柄。
先上效果图：
如图所示，通过拖动来改变表单的宽度。
但实际上，这边并不是表单的边框，而是一个单独的组件。通过监听鼠标的down，move以及up事件。
我们可以单独的写个组件handle.vue。
<template>
<div @mousedown="mouseDown"></div>
</template>
<script>
export default {
name: "XHandle",
data() {
return {
lastX: ""
};
},
created() {
document.addEventListener("mouseup", this.mouseUp);
},
destroyed() {
document.removeEventListener("mouseup", this.mouseUp);
},
methods: {
mouseDown(event) {
document.addEventListener("mousemove", this.mouseMove);
this.lastX = event.screenX;
},
mouseMove(event) {
this.$emit("widthChange", this.lastX - event.screenX);
this.lastX = event.screenX;
console.log(this.lastX, "...", event.screenX);
},
mouseUp() {
this.lastX = "";
document.removeEventListener("mousemove", this.mouseMove);
}
}
};
</script>
<style lang="less">
.x-handle {
2px;
cursor: w-resize;
z-index: 10;
background: #ccc;
}
</style>
监听事件并this.$emit将值传给父组件，父组件通过传过来的值来动态的修改需要改变宽度的元素。
如效果图所示，写一个有需求组件，并引入handle组件
<div class='sss'>
<div :style="{ width + 'px' }" ></div> // 这里是你自己需要改变宽度的组件
<XHandle @widthChange="widthChange" />
</div>
<script>
import XHandle from "@/components/Xhandle";
export default {
data() {
return {
700,
};
},
components: {
XHandle
},
methods: {
widthChange(movement) {
console.log(movement, "~~~");
this.width -= movement;
if (this.width < 300) {
this.width = 300;
}
if (this.width > 700) {
this.width = 700;
}
}
}
};
</script>
<style lang="less" scoped>
.sss {
display: flex;
}
</style>
这里将需要改变宽度的元素给一个双向绑定的值，然后通过子组件传来的值修改。再将两个元素弹性布局，相当于hanle组件就会
贴着我们需要拖动的元素，看上去是再拖动我们要改变宽度的元素，其实是在拖动我们的handle。