基于Vue3 + Element plus的Dialog可拖拽组件封装

项目小需求增加dialog的可拖拽效果，综合考虑现有项目的情况直接封装通用组件+自定义指令实现效果。

话不多说,直接上组件DialogDrag代码:

(ps: 前置条件：已有拖拽的自定义指令)

import { h, defineComponent, resolveDirective, withDirectives, Directive } from 'vue';
export default defineComponent({
  name: 'DialogDrag',
  props: {
    customClass: {
      type: String,
      reuqired: true,
      default: 'custom-dialog',
    },
  },
  setup(props) {
    const dragBinding = [`.${props.customClass}.el-dialog`, `.${props.customClass} .el-dialog__header`];
    return {
      dragBinding,
    };
  },
  render() {
    //v-drag:https://gitee.com/lyt-top/vue-next-admin/blob/master/src/utils/customDirective.ts
    const drag: Directive | undefined = resolveDirective('drag');
    return (
      drag &&
      withDirectives(
        h(
          'section',
          {
            class: 'dialog-drag-wrapper',
          },
          this.$slots.default()
        ),
        [[drag, this.dragBinding]]
      )
    );
  },
});

组件使用:

<template>
  <div class="index-wrapper">
    <el-dialog v-model="dialogVisible" title="Tips" width="30%" custom-class="custom-dialog">
      <dialog-drag custom-class="custom-dialog">
        <span>This is a message</span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">Cancel</el-button>
            <el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
          </span>
        </template>
      </dialog-drag>
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import DialogDrag from 'component-path/dialog-drag';
export default defineComponent({
  components: {
    DialogDrag,
  },
  setup() {
    const dialogVisible = ref(true);
    return {
      dialogVisible,
    };
  },
});
</script>

效果：

参考:

Vue3官方文档

lyt-Top大佬项目dialog拖拽