一、创建一个js文件 因为本身dialog窗口不具备移动拖拽能力,所以需要以下方法去实现,在src/components同级文件下创建utils文件夹,然后创建名为directives.js的文件。 directives.js的代码如下: 1import Vue from 'vue'23//v-dialogDrag: 弹窗拖拽4Vue.directive('dialogDrag', {5bind(el, binding, vnode, oldVnode...
vue v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag', { inserted:function(el) { const dragDom = el.querySelector('.jsPropupLayerHead'); dragDom.style.cursor = 'move'; dragDom.onmousedown = (e) => { event.stopPropagation(); // 鼠标按下,计算当前元素距离可视区的距离 const disX = ...
let nowHight = 0;//当前顶部高度let nowMarginTop = 0;//获取弹框头部(这部分可双击全屏)const dialogHeaderEl = el.querySelector('.el-dialog__header');//弹窗const dragDom = el.querySelector('.el-dialog');//给弹窗加上overflow auto;不然缩小时框内的标签可能超出dialog;dragDom.style.overflow...
首先是弹框,用html+css画出来,vue中控制显示隐藏v-show或v-if: <div v-if="visible"class="my_dialog"id="dialogbig"><divclass="my_dialog_box"id="my_dialog_box"v-drag><divclass="my_dialog_title">{{showTitle}}<spanclass="my_dialog_close"@click="cancel"></span></div><!--内容-->...
import Vue from "vue"; // v-dialogDrag: 弹窗拖拽+水平方向伸缩 /* * 使用方法 * 将以下代码复制到一个js文件中,然后在入口文件main.js中import引入即可; * 给elementUI的dialog上加上 v-dialogDrag 指令就可以实现弹窗的全屏和拉伸了。 * 给dialog设置 :close-on-click-modal="false" , 禁止点击遮罩...
一、utils文件夹下创建dialog.js文件 import Vue from 'vue' // v-dialogDrag: 弹窗拖拽 Vue.directive('dialogDrag', { bind(el, binding, vnode, oldVnode) { const dialogHeaderEl = el.querySelector('.el-dialog__header') const dragDom = el.querySelector('.el-dialog') ...
1、准备:在准备一个vue组件(点击按钮弹出对话框):在vue组件中添加**v-dialogDrag**属性//自定义指令: v-dialogDrag//点击遮罩层关闭对话框: close-on-click-modal<el-dialog v-dialogDrag :close-on-click-modal="false" title="我是标题" :visible.sync="mipLightbox"></el-dialog> ...
}; document.onmouseup = function (e) { document.onmousemove = null; document.onmouseup = null; }; } } }) 创建完成dialogDrag文件后,直接在main.js引入即可 v-dialogDrag: 弹窗拖拽属性 (重点!!! 给模态框添加这个属性模态框就能拖拽了)
// v-dialogDrag: 弹窗拖拽Vue.directive('dialogDrag',{bind(el,binding,vnode,oldVnode){constdialogHeaderEl=el.querySelector('.el-dialog__header')constdragDom=el.querySelector('.el-dialog')dialogHeaderEl.style.cursor='move'// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyl...
// 拖拽import dialogDrag from'./control-web/js/dialogDrag.js'createApp(App).use(dialogDrag) // 对话框的拖拽 7 使用方式 本来想直接放在 el-dialog 里面,但是却没有效果,所以只好在外面套上一个 div。 <div v-dialogdrag><el-dialogtitle="收货地址"v-model="dialogFormVisible":modal="false">略...