vue实现边框线拖拽效果（拖动元素边框改变宽度）

1.封装组件

实现的效果：

自定义组件代码

<template><div class="x-handle" :style="divStyle" @mousedown="mouseDown"><el-headerstyle="height: 21px;border-bottom: 1px solid rgb(235, 238, 245);padding: 0px;text-align: center;position:absolute;top:50%; transform:translate(-0%,-0%)"><div v-if="shouldCloseWindow=='left'"><el-tooltipv-if="showTooltip"class="item"effect="dark"content="点击展开/隐藏"placement="bottom-end"><el-buttontype="text"style="margin-left: -2px;float:right;font-size:5px;padding:0;color: #030c14;"v-on:click="visibleChange"class="btn-collapse"><i class="el-icon-arrow-right" v-if="visible"></i><i class="el-icon-arrow-left" v-else></i></el-button></el-tooltip><el-buttonv-if="!showTooltip"type="text"style="margin-left: -2px;float:right;font-size:5px;padding:0;color: #030c14;"v-on:click="visibleChange"class="btn-collapse"><i class="el-icon-arrow-right" v-if="visible"></i><i class="el-icon-arrow-left" v-else></i></el-button></div><div v-if="shouldCloseWindow=='right'"><el-tooltipv-if="showTooltip"class="item"effect="dark"content="点击展开/隐藏"placement="bottom-end"><el-buttontype="text"style="margin-left: -2px;float:right;font-size:5px;padding:0;color: #030c14;"v-on:click="visibleChange"class="btn-collapse"><i class="el-icon-arrow-left" v-if="visible"></i><i class="el-icon-arrow-right" v-else></i></el-button></el-tooltip><el-buttonv-if="!showTooltip"type="text"style="margin-left: -2px;float:right;font-size:5px;padding:0;color: #030c14;"v-on:click="visibleChange"class="btn-collapse"><i class="el-icon-arrow-left" v-if="visible"></i><i class="el-icon-arrow-right" v-else></i></el-button></div></el-header></div>
</template><script>
export default {name: "XHandle",props: ["isShowTooltip", "isCanMove", "closeWindow"],data() {return {lastX: "",visible: false,canMove: false,showTooltip: false,shouldCloseWindow: "left"};},created() {document.addEventListener("mouseup", this.mouseUp);if (this.isShowTooltip != undefined && this.isShowTooltip != "undefined")this.showTooltip = this.isShowTooltip;if (this.isCanMove != undefined && this.isCanMove != "undefined")this.canMove = this.isCanMove;if (this.closeWindow != undefined && this.closeWindow != "undefined")this.shouldCloseWindow = this.closeWindow;},destroyed() {document.removeEventListener("mouseup", this.mouseUp);},computed: {divStyle: function() {if (this.canMove)return {cursor: "w-resize"};}},methods: {visibleChange() {this.visible = !this.visible;this.$emit("visibleChange");},mouseDown(event) {document.addEventListener("mousemove", this.mouseMove);this.lastX = event.screenX;},mouseMove(event) {if (this.canMove) {this.$emit("widthChange", this.lastX - event.screenX);this.lastX = event.screenX;}},mouseUp() {this.lastX = "";document.removeEventListener("mousemove", this.mouseMove);}}
};
</script>
<style lang="less">
.x-handle {width: 7px;z-index: 10;background: #ccc;-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;
}
</style>

2.使用步骤

a.引入并注册组件

<script>import XHandle from "@/components/Xhandle";//以你自己目录为准components: { XHandle },
</script>

b.代码指定位置增加以下代码(左侧收起)

<template><!--左侧界面，主要是定义 v-show="!visible" :style="{ width: width + 'px' }"--><el-aside  v-show="!visible" :style="{ width: width + 'px' }"></el-aside><!--中间的拉动/收放的组件，用于实现拉动动态改变左右两侧的宽度-><!--showTooltip:是否显示展开/收起的提示内容--><!--isCanMove:是否允许拖动改变大小--><!--closeWindow:默认左侧的窗口收起，设置为right时，右侧的窗口收起--><div class="xHandle"><XHandle :showTooltip="false" :isCanMove="true" @widthChange="widthChange" @visibleChange="visibleChange" /></div><!--右边侧界面，主要是定义 :style="divStyle"用于动态改变右侧宽度--><el-aside :style="divStyle"></el-aside>
</template>
<script>
data() {return {//定义两个变量width: 250,visible:false};},computed: {//右侧界面宽度的动态改变divStyle: function() {return {width: "calc(100% - " + this.width + "px)",height: "100%"};}},methods: {//相应XHandle子组件的两个方法visibleChange() {this.visible = !this.visible;if (this.visible) {this.width = 0;} else {this.width = 250;}},widthChange(movement) {this.visible = false;this.width -= movement;//右边收起时，this.width += movement  左边收起时this.width -= movementif (this.width < 0) {//这个值的作用为：限制左侧界面能允许接受的最小宽度，例：设为50时，左侧的界面不会被缩小到50px以下this.width = 0;}if (this.width > 250) {//设置为data 中width变量的宽度一致this.width = 250;}}
}
</script>
<style scoped>
/*添加对应样式*/
.xHandle {display: flex;
}
</style>

当需要右侧收起和展开时：

调换两处 :style的绑定值；widthChange()方法中的this.width -= movement改为this.width += movement

<template><!--左侧界面，主要是定义 :style="divStyle"用于动态改变右侧宽度 --><el-aside :style="divStyle"></el-aside><!--中间的拉动/收放的组件，用于实现拉动动态改变左右两侧的宽度-><!--showTooltip:是否显示展开/收起的提示内容--><!--isCanMove:是否允许拖动改变大小--><!--closeWindow:默认左侧的窗口收起，设置为right时，右侧的窗口收起--><div class="xHandle"><XHandle :showTooltip="false" :isCanMove="true" @widthChange="widthChange" @visibleChange="visibleChange" /></div><!--右边侧界面，主要是定义 v-show="!visible" :style="{ width: width + 'px' }"--><el-aside  v-show="!visible" :style="{ width: width + 'px' }"></el-aside>
</template>
<script>
methods: {widthChange(movement) {this.visible = false;this.width += movement;//右边收起时:this.width += movement  左边收起时this.width -= movementif (this.width < 0) {//这个值的作用为：限制左侧界面能允许接受的最小宽度，例：设为50时，左侧的界面不会被缩小到50px以下this.width = 0;}if (this.width > 250) {//设置为data 中width变量的宽度一致this.width = 250;}}
}
</script>

3.0拓展

为实现收起/展开的动画效果，建议将需要收起/展开的部分用transition包起来，并在对应的样式中增加自己想要的动画效果

例如：

<template><transition name="router-slid"><!--左侧界面，主要是定义 v-show="!visible" :style="{ width: width + 'px' }"--><el-aside v-show="!visible" :style="{ width: width + 'px' }"></el-aside></transition>
</template><style scoped>
/*添加对应样式*/
.router-slid-enter-active,
.router-slid-leave-active {transition: all 0.1s;
}
.router-slid-enter,
.router-slid-leave-active {transform: translate3d(-3rem, 0, 0);opacity: 0;
}
</style>

vue实现边框线拖拽效果（拖动元素边框改变宽度）相关推荐

php表格列宽拖拽,JavaScript_JQuery拖动表头边框线调整表格列宽效果代码，类似于桌面程序中的表格拖动 - phpStudy...
JQuery拖动表头边框线调整表格列宽效果代码类似于桌面程序中的表格拖动表头的效果,当鼠标停留在表头边框线上时,鼠标会变成表示左右拖动的形状,接着拖动鼠标,会在表格中出现一条随鼠标移动的竖线,最后放 ...
VUE 实现拖拽效果
写在前面在我们平时做也无需求中,往往会遇到拖拽模块的需求.刚开始没有接触过拖拽的时候,会对拖拽有陌生感,会比较担心实现起来会比较的复杂,可能自己很难搞定.然后就会去网上百度一些 vue 拖拽相关的插 ...
Android仿探探卡片拖拽,Vue 仿探探拖拽卡片的效果
原标题:Vue 仿探探拖拽卡片的效果已更新Vue3版,请给前端大全发送关键字vue3仿探探获取Vue3版类似 Tinder 和探探的卡片效果的组件,社区中已经非常多了.我这一版除了可以实现和他 ...
h5物体拖动_html5实现拖拽效果
在此之前,实现拖拽操作都是开发人员自定义逻辑实现的,但是HTML5提供了拖拽API ,使得拖拽操作的实现变得简单. fish.gif 拖拽 #div1 { width: 100px; height: ...
Vue中实现拖拽效果
Vue2项目中遇到需求要求页面左侧部分实现拖拽效果实现效果: 1665739151500 实现代码: 一.使用盒子包裹需要拖拽的区域,并绑定ref 二.使用$ref获取DOM信息具体代码(这个方法 ...
vue拖拽效果（适用范围自定义表单，电子合同签章等）
vue拖拽效果实现实现原因之前项目需求做一个自定义拖拽控件,进行自定义表单生成以及电子合同签字盖章,总结一下思路. 实现思路首先需要可以拖拽的控件, 鼠标长按拖拽到拖拽存放区后,松开鼠标拖拽存放 ...
在 Element-UI 的 Table 组件上添加列拖拽效果
在 Element-UI 的 Table 组件上添加列拖拽效果一.数据驱动传统的拖动效果,都是基于通过 mousedown.mousemove.mouseup 事件来修改删减 dom 节点但 V ...
【墙裂推荐】【原生基础版】js原生实现拖拽效果，注意不要忘了div的cursor用grab和grabbing 还是古法炮制、传统工艺的原生代码兼容性最好，推荐
以下方式的劣势就是在放弃拖拽那一刻会触发click事件,通常如果被拖拽元素还有其他点击事件,会重复触发,往往并非业务需求.优势就是-额-貌似这段代码没什么屌优势! <div class='dra ...
html拖拽模态框,bootstrap模态框实现拖拽效果
本文实例为大家分享了bootstrap模态框实现拖拽效果,供大家参考,具体内容如下项目中用的有点乱,jquery和angularjs一起搞,有些插件用的jquery版本的,有的插件用的ng版本的.搞 ...

vue实现边框线拖拽效果（拖动元素边框改变宽度）

1.封装组件

实现的效果：

自定义组件代码

2.使用步骤

a.引入并注册组件

b.代码指定位置增加以下代码(左侧收起)

当需要右侧收起和展开时：

3.0拓展

vue实现边框线拖拽效果（拖动元素边框改变宽度）相关推荐

最新文章

热门文章