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

野性酷女 2022-10-02 15:52 716阅读 0赞

基于el-dialog， 封装了一下。，实在懒得写，所以直接把代码 粘出来了

大概粘了一下效果。自己体会把。

![1517208-20190509113148635-1361852761.png][]

![1517208-20190509113210454-2046411727.png][]

![1517208-20190509113226393-1225700655.png][]

**组件使用**

<el-dialog
        v-dialogDrag
        ref="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.isminimize
            if (this.isfullscreen) this.isfullscreen = !this.isfullscreen
          },
          // 关闭弹窗
          closeDialog() {
            this.dialogVisible = false
          },
          // 打开弹窗
          openDialog() {
            this.dialogVisible = true
          },
          // 全屏
          IsFullscreen() {
            this.isfullscreen = !this.isfullscreen
            if (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.offsetLeft
                const disY = e.clientY - dialogHeaderEl.offsetTop
    
                // 获取到的值带px 正则匹配替换
                let styL, styT
    
                // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
                if (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 - disX
                  const 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.offsetLeft
                  const offsetTop = dragDom.offsetTop
                  const left = Number(dragDom.style.left.replace('px', ''))
                  const top = Number(dragDom.style.top.replace('px', ''))
                  const windowWidth = window.innerWidth
                  const windowHeight = window.innerHeight - 50
                  const offsetRight = offsetLeft + dragDom.offsetWidth - windowWidth
                  const offsetBottom = offsetTop + dragDom.offsetHeight - windowHeight
                  if (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 = null
                  document.onmouseup = null
                }
              }
            }
          }
        },

监听 （打开关闭后 还原状态）

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

样式

转载于:https://www.cnblogs.com/yasoPeng/p/10837449.html

[1517208-20190509113148635-1361852761.png]: /images/20220109/b4481088e15a40e5a42b1bcbe642949f.png
[1517208-20190509113210454-2046411727.png]: /images/20220109/c4054ac88be8483e80d4617697cba35b.png
[1517208-20190509113226393-1225700655.png]: /images/20220109/711c67170e2842069bd201b6688e466e.png