自定义指令助力el-dialog，轻松实现拖拽功能，突破局限，尽享便捷

2023-12-16 20:38:43

前言

在构建现代网页应用时，对话框组件无疑扮演着不可或缺的角色。它们允许开发人员在不影响主界面布局的情况下，向用户呈现重要信息或请求用户输入。Element-Plus 作为一款流行的 Vue.js 组件库，提供了功能强大的 el-dialog 组件，但遗憾的是，它并没有内置拖拽功能。这对于需要在应用中提供拖动对话框功能的开发人员来说，是一个小小的遗憾。

为了弥补这一缺憾，我们可以使用 Vue.js 3 中的自定义指令来轻松实现 el-dialog 的拖拽功能。自定义指令是 Vue.js 提供的一种强大的工具，它允许开发人员创建自己的指令，从而扩展 Vue.js 的功能。

使用自定义指令实现el-dialog的拖拽功能

步骤1：创建自定义指令

首先，我们需要创建一个自定义指令来实现拖拽功能。我们可以使用 Vue.js 3 中的 defineDirective() 函数来创建自定义指令。以下是自定义指令的代码：

import { onMounted, onUnmounted } from 'vue'

export default {
  mounted(el, binding) {
    const dialogHeader = el.querySelector('.el-dialog__header')
    const dialog = el.querySelector('.el-dialog')

    const dragStart = (e) => {
      if (!dialog.classList.contains('el-dialog--draggable')) {
        return
      }

      const rect = dialog.getBoundingClientRect()
      const startX = e.clientX - rect.left
      const startY = e.clientY - rect.top

      const move = (e) => {
        const left = e.clientX - startX
        const top = e.clientY - startY

        dialog.style.left = `${left}px`
        dialog.style.top = `${top}px`
      }

      const end = () => {
        window.removeEventListener('mousemove', move)
        window.removeEventListener('mouseup', end)
      }

      window.addEventListener('mousemove', move)
      window.addEventListener('mouseup', end)
    }

    dialogHeader.addEventListener('mousedown', dragStart)
  },
  unmounted(el) {
    const dialogHeader = el.querySelector('.el-dialog__header')

    dialogHeader.removeEventListener('mousedown', dragStart)
  }
}

步骤2：使用自定义指令

创建好自定义指令后，我们就可以在我们的 Vue.js 组件中使用它了。以下是使用自定义指令的代码：

<template>
  <el-dialog v-draggable>
    ...
  </el-dialog>
</template>

<script>
import draggable from './draggable'

export default {
  directives: {
    draggable
  }
}
</script>