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
    v-bind="$attrs"
    v-on="$listeners"
  >
    <slot></slot>
    <span slot="footer">
      <m-button @click="show = false">{{ option?.textCancel ?? '取 消'}}</m-button>
      <m-button type="primary" @click="sure">{{ option?.textSure ?? '确 定'}}</m-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'm-dialog',
  props: {
    title: String,
    width: String,
    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>

</style>