-
vue中 拖動元素邊框 改變元素寬度
先上效果圖：
1837051-20200422151530576-1464241975[1].gif
如圖所示，通過拖動來改變表單的寬度。
但實際上，這邊并不是表單的邊框，而是一個單獨的組件。通過監聽鼠標的down，move以及up事件。我們可以單獨的寫個組件handle.vue。
<template>
<div class="x-handle" @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 class="myxhandle" @widthChange="widthChange" />
</div>
</pre>
<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。
