使用Vue和Element-plus怎么实现一个可拖拽的Dialog组件

创建一个基本的Dialog组件

我们首先需要创建一个基本的Dialog组件，包含标题、内容和底部操作区。在这个组件中，我们可以使用Element-plus的Dialog组件来实现。

<template>
  <el-dialog
    :title="title"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :width="width"
  >
    <div v-html="content"></div>
    <div slot="footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  export default {
    props: {
      title: String,
      content: String,
      visible: Boolean,
      width: {
        type: String,
        default: '50%'
      }
    },
    methods: {
      cancel() {
        this.$emit('cancel')
      },
      confirm() {
        this.$emit('confirm')
      },
      beforeClose(done) {
        this.$emit('before-close', done)
      }
    }
  }
</script>

在这个组件中，我们使用了Element-plus的Dialog组件来实现弹窗的基本结构，同时定义了一些需要传递的属性和方法。

给Dialog组件加上可拖拽功能

接下来，我们需要给Dialog组件加上可拖拽的功能，让用户可以通过拖拽弹窗标题栏来移动弹窗位置。

首先，我们需要在Dialog组件中加入一个dragging变量，用来记录当前是否正在拖拽弹窗。

<script>
  export default {
    data() {
      return {
        dragging: false,
        // ...
      }
    },
    // ...
  }
</script>

然后，我们需要在弹窗标题栏上绑定mousedown事件，当用户按下鼠标时设置dragging为true，表示当前正在拖拽弹窗。

<template>
  <el-dialog
    ...
    @mousedown.native="onDragStart"
  >
    <div slot="header" class="drag-handle">
      {{ title }}
    </div>
    ...
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        dragging: false,
        // ...
      }
    },
    methods: {
      onDragStart() {
        this.dragging = true
      },
      // ...
    }
  }
</script>

<style scoped>
  .drag-handle {
    cursor: move;
  }
</style>

接着，我们需要在整个页面上绑定mousemove和mouseup事件，当用户拖拽弹窗时，根据鼠标位置计算出弹窗应该移动的位置，并将其应用到弹窗上。

<template>
  <el-dialog
    ...
    @mousedown.native="onDragStart"
    @mousemove.native="onDragMove"
    @mouseup.native="onDragEnd"
  >
    ...
  </el-dialog>
</template>

<script>
  export default {
    data() {
      return {
        dragging: false,
        startX: 0,
        startY: 0,
        translateX: 0,
        translateY: 0,
        // ...
      }
    },
    methods: {
      onDragStart(event) {
        this.dragging = true
        this.startX = event.clientX
        this.startY = event.clientY
      },
      onDragMove(event) {
        if (this.dragging) {
          const deltaX = event.clientX - this.startX
          const deltaY = event.clientY - this.startY
          this.translateX += deltaX
          this.translateY += deltaY
          this.startX = event.clientX
          this.startY = event.clientY
        }
      },
      onDragEnd() {
        this.dragging = false
      },
      // ...
    },
    computed: {
      dialogStyle() {
        return {
          transform: `translate(${this.translateX}px, ${this.translateY}px)`
        }
      }
    }
  }
</script>

<style scoped>
  .drag-handle {
    cursor: move;
  }
  .el-dialog__wrapper {
    transition: none !important;
  }
  .el-dialog__wrapper.is-fullscreen {
    transition: all .3s;
  }
  .el-dialog__wrapper.is-dragging {
    cursor: move;
  }
</style>

最后，我们将计算出来的translateX和translateY应用到弹窗上，实现拖拽效果。同时，我们还需要给.el-dialog__wrapper元素加上is-dragging类，让其在拖拽时显示拖拽样式。

这样，我们就实现了一个带有可拖拽功能的Dialog组件。完整代码如下：