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...
let nowHight=0;//当前顶部高度let nowMarginTop =0;//获取弹框头部(这部分可双击全屏)constdialogHeaderEl = el.querySelector('.el-dialog__header');//弹窗constdragDom = el.querySelector('.el-dialog');//给弹窗加上overflow auto;不然缩小时框内的标签可能超出dialog;dragDom.style.overflow ="auto...
将以下代码复制到一个js文件中,然后在入口文件main.js中import引入即可; * 给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 dialogHeaderEl = el.querySelector('.el-dialog__header'); const dragDom = el.querySelector('.el-dialog'); //dialogHeaderEl.style.cursor = 'move'; ...
// 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...
一、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') ...
importVuefrom'vue';// v-dialogDrag: 弹窗拖拽属性Vue.directive('dialogDrag',{bind(el,binding,vnode,oldVnode){constdialogHeaderEl=el.querySelector('.dialog_header');constdragDom=el;//dialogHeaderEl.style.cursor = 'move';dialogHeaderEl.style.cssText+=';cursor:move;'dragDom.style.cssText+=...
// 引入Dialog可拖拽,注意文件所在目录。目前尚未发现引入的先后关系,若有再补充import'./directives.js'; AI代码助手复制代码 ue文件中使用: 在el-dialog标签中加入v-dialogDrag属性 <el-dialogv-dialogDrag></el-dialog> AI代码助手复制代码 具体使用便是这样,希望有人看到哈哈哈,当然主要还是想帮到大家。
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> ...