vue实现拖拽表格_Vue实现弹窗拖拽和放大效果

Vue实现弹窗拖动放大缩小

写项目的时候，看到了别人项目里弹窗都可以拖动，可以放大缩小，很是眼馋(主要是交互很人性化)，近几天抽出时间实现了下，特来给分享下,因为官方的Element-Ui没有自带的拖动效果，所以，我们使用的是网友提供的方法。

先来看下图片效果

效果图里实现了拖动，上下放大和左右放大，双击头部会实现全屏，因为普通的弹窗标签会在我们点击弹窗之外的部分的时候自动关闭，所以我们需要给弹窗部分增加一个属性

页面标签引用部分     <el-dialog title="墨 点 白" :visible.sync="dialogVisible"     :close-on-click-modal=false     v-dialogDrag     width="75%"     >     //:visible.sync="dialogVisible" 这个属性的作用是不让点击外面关闭弹窗     <div style="color: darkorange;font-size: 64px;">       墨 点 白     div>    el-dialog>

实现方法，将以下代码写为到Js文件里，在项目的main.js文件内引用，然后我们使用的时候，在标签里加上指定的标签就可以实现了。

实现代码部分

/**  使用方法*  将以下代码复制到一个drag.js文件中，然后在入口文件main.js中导入：import ‘./util/drog.js’；*  给elementUI的dialog上加上 v-dialogDrag 指令就可以实现弹窗的全屏和拉伸了。*  给dialog设置 :close-on-click-modal="false" , 禁止点击遮罩层关闭弹出层*  如果是form表单，不要将提交等按钮放置el-form-item，以免在上下拉伸时被隐藏*/// v-dialogDrag: 弹窗拖拽+水平方向伸缩Vue.directive('dialogDrag', {
      bind(el, binding, vnode, oldVnode) {
        // 弹框可拉伸最小宽高    const minWidth = 400    const minHeight