弹出框要求添加拖拽和双击头部全屏
1、创建js

import Vue from 'vue'
// v-dialogDrag: 弹窗拖拽属性 (重点!!! 给模态框添加这个属性模态框就能拖拽了)
Vue.directive('dialogDrag', {
//属性名称dialogDrag,前面加v- 使用
bind(el, binding, vnode, oldVnode) {
//弹框可拉伸最小宽高
let minWidth = 400
let minHeight = 300
//初始非全屏
let isFullScreen = false
//当前宽高
let nowWidth = 0
let nowHight = 0
//当前顶部高度
let nowMarginTop = 0
//获取弹框头部(这部分可双击全屏)
const dialogHeaderEl = el.querySelector('.el-dialog__header')
const dragDom = el.querySelector('.el-dialog')
//dialogHeaderEl.style.cursor = 'move';
dialogHeaderEl.style.cssText += ';cursor:move;'
dragDom.style.cssText += ';top:0px;'
// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const sty = (function() {
if (window.document.currentStyle) {
return (dom, attr) => dom.currentStyle

本文介绍了如何为el-dialog弹出层添加拖拽和双击头部全屏的功能。通过创建JavaScript代码并全局引入到main.js中,然后在弹框组件上应用这些功能。
最低0.47元/天 解锁文章

被折叠的 条评论
为什么被折叠?



