一、创建一个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 = ...
3、最后找到我们需要拖拽的组件,在其标签上加上v-dialogDrag即可(自定义指令)。代码如下: // DragDialog.vue <section class="main"> <div class="crumbs"> <el-breadcrumb separator="/"> <el-breadcrumb-item><i class="el-icon-rank"></i> 拖拽组件</el-breadcrumb-item> <el-breadcrumb-item>拖拽...
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...
import Vue from "vue"; // v-dialogDrag: 弹窗拖拽+水平方向伸缩 /* * 使用方法 * 将以下代码复制到一个js文件中,然后在入口文件main.js中import引入即可; * 给elementUI的dialog上加上 v-dialogDrag 指令就可以实现弹窗的全屏和拉伸了。 * 给dialog设置 :close-on-click-modal="false" , 禁止点击遮罩...
// 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 Vue from 'vue'//v-dialogDrag: 弹窗拖拽属性Vue.directive('dialogDrag', { bind (el, binding, vnode, oldVnode) {if(!binding.value)returnconst 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+=...
一、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') ...
`// v-dialogDrag: 弹窗拖拽 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'; ...