vue 点开弹窗最大化_Vue实现弹窗拖动放大缩小

Vue实现弹窗拖动放大缩小

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

先来看下图片效果

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

页面标签引用部分

:close-on-click-modal=false

v-dialogDrag

width="75%"

>

//:close-on-click-modal=false 这个属性的作用是不让点击外面关闭弹窗

墨 点 白

实现方法，将以下代码写为到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 = 300

// 初始非全屏

let isFullScreen = false

// 当前顶部高度

let nowMarginTop = 0

// 获取弹框头部(这部分可双击全屏)

const dialogHeaderEl = el.querySelector('.el-dialog__header')

// 弹窗

const dragDom = el.querySelector('.el-dialog')<