當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

实现el-dialog的拖拽，全屏，缩小功能

發布時間：2025/4/5 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了实现el-dialog的拖拽，全屏，缩小功能小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

基于el-dialog，封裝了一下。，實在懶得寫，所以直接把代碼粘出來了

大概粘了一下效果。自己體會把。

組件使用

<el-dialogv-dialogDragref="xhzqDialog"class="xhzqDialog":title="title":fullscreen="isfullscreen":visible.sync="dialogVisible":append-to-body="true":close-on-click-modal="false":show-close="false":width="width":class="isminimize? 'isminimize': ''"center><div v-show="!isminimize" slot="title" class="medium"><div></div><div class="centers"><span>{{title}}</span></div><div class="icons"><i class="iconfont icon-minus" style="font-size: 24px" @click="minimize"></i><i :class="isfullscreen? 'iconfont icon-full-screen-exit' : 'iconfont icon-full-screen' " style="font-size: 24px" @click="IsFullscreen"></i><i class="iconfont icon-close" style="font-size: 24px" @click="closeDialog"></i></div></div><div v-show="isminimize" slot="title" class="horn"><div class="lefts"><span>{{title}}</span></div><div class="centers"><i class="iconfont icon-full-screen" style="font-size: 24px" @click="minimize"></i></div><div class="rights"><i class="iconfont icon-close" style="font-size: 24px" @click="closeDialog"></i></div></div><div v-show="!isminimize" class="dialogBody"><slot></slot></div><div v-show="!isminimize" v-if="isFooter" class="dialogFooter"><slot name="footer" solt="footer"></slot></div></el-dialog>

數據定義

data() {return {isfullscreen: false, // 全屏isminimize: false, // 最小化dialogVisible: false // 隱藏彈窗}},

　傳遞參數

props: {width: {type: String,default: '50%'},title: {type: String,default: ''},isFooter: { // 是否顯示腳部type: Boolean,default: true}},

　　組件方法

methods: {// 最小化minimize() {this.isminimize = !this.isminimizeif (this.isfullscreen) this.isfullscreen = !this.isfullscreen},// 關閉彈窗closeDialog() {this.dialogVisible = false},// 打開彈窗openDialog() {this.dialogVisible = true},// 全屏IsFullscreen() {this.isfullscreen = !this.isfullscreenif (this.isfullscreen) this.$emit('isfullscreen')}},

　　自定義指令

directives: {dialogDrag: {bind(el, binding, vnode, oldVnode) {const dialogHeaderEl = el.querySelector('.el-dialog__header')const dragDom = el.querySelector('.el-dialog')dialogHeaderEl.style.cursor = 'move'// 獲取原有屬性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)// const fixedX =// const fixedY =dialogHeaderEl.onmousedown = (e) => {// 判斷當前是否為全屏狀態const path = event.path || (event.composedPath && event.composedPath())const isFull = path.find(s => {if (s.className === undefined) {return false} else {return s.className.indexOf('is-fullscreen') > -1}})if (isFull !== undefined) {return}const isMinix = path.find(s => {if (s.className === undefined) {return false} else {return s.className.indexOf('isminimize') > -1}})if (isMinix !== undefined) {return}// 鼠標按下，計算當前元素距離可視區的距離const disX = e.clientX - dialogHeaderEl.offsetLeftconst disY = e.clientY - dialogHeaderEl.offsetTop// 獲取到的值帶px 正則匹配替換let styL, styT// 注意在ie中第一次獲取到的值為組件自帶50% 移動之后賦值為pxif (sty.left.includes('%')) {styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)} else {styL = +sty.left.replace('px', '')styT = +sty.top.replace('px', '')}document.onmousemove = function(e) {// 通過事件委托，計算移動的距離const l = e.clientX - disXconst t = e.clientY - disY// 移動當前元素dragDom.style.left = `${l + styL}px`dragDom.style.top = `${t + styT}px`// const dom = e.path.find(s => s.querySelector('.el-dialog')).children[0]//// if (dom.offsetTop < 0) {// dragDom.style.top = `0px`// }// if (dom.offsetLeft < 0) {// dragDom.style.left = `0px`// }// 將此時的位置傳出去// binding.value({x:e.pageX,y:e.pageY})}document.onmouseup = function(e) {const dragDom = el.querySelector('.el-dialog')const offsetLeft = dragDom.offsetLeftconst offsetTop = dragDom.offsetTopconst left = Number(dragDom.style.left.replace('px', ''))const top = Number(dragDom.style.top.replace('px', ''))const windowWidth = window.innerWidthconst windowHeight = window.innerHeight - 50const offsetRight = offsetLeft + dragDom.offsetWidth - windowWidthconst offsetBottom = offsetTop + dragDom.offsetHeight - windowHeightif (offsetLeft < 0) {dragDom.style.left = (left - offsetLeft) + 'px'}if (offsetTop < 0) {dragDom.style.top = (top - offsetTop) + 'px'}if (offsetRight > 0) {dragDom.style.left = (left - offsetRight) + 'px'}if (offsetBottom > 0) {dragDom.style.top = (top - offsetBottom) + 'px'}document.onmousemove = nulldocument.onmouseup = null}}}}},

　　監聽（打開關閉后還原狀態）

watch: {dialogVisible(val) {if (val) {const el = this.$refs.xhzqDialog.$el.querySelector('.el-dialog')el.style.left = 0el.style.top = 0}}}

　　樣式

轉載于:https://www.cnblogs.com/yasoPeng/p/10837449.html

總結

以上是生活随笔為你收集整理的实现el-dialog的拖拽，全屏，缩小功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Linux快速入门打开你的学习之道
下一篇： DAMS2019中国数据智能管理峰会将于