remuneration/src/components/AutoComponents/MDialog/index.vue

<template>
  <el-dialog
    :visible.sync="show"
    :title="title"
    :width="width ?? '800px'"
    lock-scroll
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    destroy-on-close
    :class="{'el-dialog--hide-footer': hideFooter }"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <slot></slot>
    <span slot="footer" v-if="!hideFooter">
      <m-button @click="show = false">{{ option?.textCancel ?? '取 消'}}</m-button>
      <m-button :type="option?.colorSure ?? 'orange'" @click="sure">{{ option?.textSure ?? '确 定'}}</m-button>
      <slot name="button-after"></slot>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'm-dialog',
  props: {
    title: String,
    width: String,
    hideFooter: Boolean,
    option: {
      type: Object,
      default: () => ({
        textCancel: '取 消',
        textSure: '确 定'
      })
    }
  },
  data () {
    return {
      show: false
    }
  },
  // directives: {
  //   'drag-dialog': {
  //     bind (el, binding, vnode) {
  //       if (!binding.value) return

  //       const dialogHeaderEl = el.querySelector('.el-dialog__header')
  //       const dragDom = el.querySelector('.el-dialog')

  //       console.log(dragDom)

  //       dialogHeaderEl.style.cursor = 'move'
  //       dragDom.style.position = 'fixed'
  //       dragDom.style.marginLeft = (document.clientWidth - dragDom.clientWidth) / 2 + 'px'

  //       let isDragging = false
  //       // let offsetX = 0
  //       // let offsetY = 0

  //       dialogHeaderEl.onmousedown = (e) => {
  //         isDragging = true

  //         // 计算鼠标按下时相对于对话框左上角的偏移量
  //         // const rect = dragDom.getBoundingClientRect()
  //         const clientX = e.clientX
  //         const clientY = e.clientY

  //         document.onmousemove = (e) => {
  //           if (!isDragging) return

  //           // 计算新的对话框位置
  //           let left = e.clientX - clientX
  //           let top = e.clientY - clientY

  //           // 限制拖拽范围
  //           const screenWidth = document.body.clientWidth
  //           const screenHeight = document.body.clientHeight
  //           const dragDomWidth = dragDom.offsetWidth
  //           const dragDomHeight = dragDom.offsetHeight

  //           if (left < 0) left = 0
  //           if (left > screenWidth - dragDomWidth) left = screenWidth - dragDomWidth
  //           if (top < 0) top = 0
  //           if (top > screenHeight - dragDomHeight) top = screenHeight - dragDomHeight

  //           // 更新对话框位置
  //           dragDom.style.left = `${left}px`
  //           dragDom.style.top = `${top}px`
  //         }

  //         document.onmouseup = () => {
  //           isDragging = false
  //           document.onmousemove = null
  //           document.onmouseup = null
  //         }
  //       }
  //     }
  //   }
  // },
  methods: {
    open () {
      this.show = true
    },
    close () {
      this.show = false
    },
    sure () {
      this.$emit('sure')
      if (!this.$listeners.sure) {
        this.show = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog--hide-footer {
  ::v-deep .el-dialog {
    &.is-fullscreen {
      &>.el-dialog__body {
        height: calc(100% - 55px);
      }
    }
  }
}
::v-deep .el-dialog {
  &.is-fullscreen {
    height: 100vh;
    overflow: hidden;
    border-spacing: 0; /* 避免单元格间距影响 */
    // display: table;
    // &>.el-dialog__header, &>.el-dialog__footer {
    //   display: table-cell; /* 固定高度的行 */
    //   height: 1px; /* 最小高度，内容撑开 */
    // }
    &>.el-dialog__body {
      height: calc(100% - 55px - 70px); /* 减去头部和底部的高度 */
      box-sizing: border-box;
    //   display: table-row; /* 自动填充剩余高度 */
    //   height: 100%; /* 关键：占满剩余空间 */
    //   padding: 0;
    //   position: relative;
    //   &>.el-dialog__body_content {
    //     position: absolute;
    //     width: 100%;
    //     height: 100%;
    //   }
    }
  }
}
</style>