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

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

?

?

?

組件使用

<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>

　　

數(shù)據(jù)定義

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

　傳遞參數(shù)

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},// 關(guān)閉彈窗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) => {// 判斷當(dāng)前是否為全屏狀態(tài)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}// 鼠標(biāo)按下，計(jì)算當(dāng)前元素距離可視區(qū)的距離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) {// 通過事件委托，計(jì)算移動的距離const l = e.clientX - disXconst t = e.clientY - disY// 移動當(dāng)前元素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}}}}},

　　監(jiān)聽 （打開關(guān)閉后 還原狀態(tài)）

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

　　樣式

<style lang="scss"> .el-dialog{margin-top: 10vh!important; }.no_select{-webkit-touch-callout: none; /* iOS Safari */-webkit-user-select: none; /* Chrome/Safari/Opera */-khtml-user-select: none; /* Konqueror */-moz-user-select: none; /* Firefox */-ms-user-select: none; /* Internet Explorer/Edge */user-select: none; /* Non-prefixed version, currently */}.isminimize{left: 20px;bottom: 20px;top: auto;right: auto;overflow:hidden;.el-dialog {margin: 0 !important;width: 240px !important;height: 40px;top: 0 !important;left: 0 !important;}.el-dialog__header{cursor: auto!important;.el-dialog__headerbtn {display: none;}}.dialogFooter{position: absolute;bottom: 0;}}.xhzqDialog {.is-fullscreen {width: 100% !important;left: 0 !important;top: 0 !important;margin-top: 0 !important;overflow:hidden;position: relative;.el-dialog__header{cursor: auto!important;}.el-dialog__body{height: 100%;.dialogBody{height:100%!important;max-height:none!important;padding-bottom:120px!important;}}.dialogFooter{position: absolute;bottom: 0;width: 100%;background: #fff;}}.el-dialog{.el-dialog__header{width: 100%;padding: 5px 20px 5px !important;display: flex;border-bottom: 1px solid #ccc;@extend .no_select;cursor: auto;.medium{width: 100%;height: 100%;display: flex;div{flex:1;}.centers{span{text-align: center;font-size:16px;color:#606266;}}.icons{display: flex;justify-content: flex-end;i{color:#5f6368;font-size: 18px!important;display: block;padding:0 7px;}i:hover{background: #dcdfe6;cursor: pointer;}.el-icon-close:hover{background: #f00;color:#fff;}}}.horn{width: 100%;height: 100%;display: flex;justify-content: space-between;div{i{color:#5f6368;font-size:20px!important;}}.lefts{flex:4;margin-top: 3px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;span{font-size: 16px;color:#606266;}}.centers{flex:1;}.rights{flex:1;}i:hover{cursor: pointer;color:#000;}}.el-dialog__headerbtn {top: 0;font-size: 24px;}}.el-dialog__body{padding: 1px !important;.dialogBody{max-height: calc(80vh - 50px);box-shadow: inset 0px -2px 10px 1px #b0b3b2;overflow: auto;padding: 20px 25px 20px;background: #f7f9fc;&::-webkit-scrollbar {width: 4px;height: 8px;}&::-webkit-scrollbar-thumb {background: transparent;border-radius: 4px;}&:hover::-webkit-scrollbar-thumb {background: hsla(0,0%,53%,.4)}&:hover::-webkit-scrollbar-track {background: hsla(0,0%,53%,.1)}}.dialogFooter{padding: 10px 15px;border-top: 1px solid #ccc;text-align: right;.el-button{padding:7px 15px;}}}}.xhzqDialog{// display: flex;// justify-content: center;.el-select{width: 100%;}.el-date-editor{width: 100%;}}} </style>

　　

轉(zhuǎn)載于:https://www.cnblogs.com/yasoPeng/p/10837449.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。