Drag-Dialog 拖拽对话框组件

组件介绍

Drag-Dialog 是一个基于 Element UI Dialog 组件扩展的可拖拽对话框组件，支持拖拽功能、图标显示、内容滚动等特性。

属性说明

| 属性名 | 类型 | 默认值 | 说明 | | ----------------- | ------- | ------------ | ----------------------------------------------------------- | | dialogVisibleFlag | Boolean | false | 控制弹窗显示与否，支持 .sync 修饰符 | | iconText | String | "" | 弹窗标题旁边的图标，使用 iconfont 字体图标库的 Unicode 编码 | | elDialogProps | Object | 见下方默认值 | Element UI Dialog 组件自身的属性集合 |

elDialogProps 默认值

{
  // 弹窗标题
  title: "提示",
  // 弹窗宽度
  width: "30%",
  // 弹框首次出现的位置距离浏览器可视区顶部的距离
  top: "10vh",
  // 是否对头部和底部采用居中布局（必须是插槽的头部或者底部才生效）
  center: true,
  // 弹窗是否显示遮罩层
  modal: true,
  // 是否可以通过点击 modal 关闭 弹窗
  "close-on-click-modal": false,
  // 其他参考 Element UI Dialog 组件的属性和方法
  "......"
}

事件说明

| 事件名 | 说明 | 回调参数 | | ------------------------ | --------------------------------- | --------------------- | | update:dialogVisibleFlag | 用于 .sync 修饰符更新弹窗显示状态 | false（表示关闭弹窗） |

插槽说明

| 插槽名 | 说明 | | --------- | ---------------- | | body-slot | 弹窗内容区域 | | footer | 弹窗底部按钮区域 |

使用示例

// 注册组件（在入口文件一般是main.js中）
import DragDialog from "drag-dialog";
Vue.use(DragDialog);

<template>
  <div>
    <el-button @click="dialogVisible = true">打开弹窗</el-button>

    <drag-dialog
      :dialogVisibleFlag.sync="dialogVisible"
      :el-dialog-props="customDialogProps"
      icon-text="&#xe600;"
    >
      <template slot="body-slot">
        <!-- 弹窗内容 -->
        <div class="dialog-content">
          <p>这里是弹窗内容</p>
        </div>
      </template>
      <template slot="footer">
        <!-- 弹窗底部按钮 -->
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </template>
    </drag-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      customDialogProps: {
        title: "弹窗标题",
        width: "50%",
        top: "15vh",
        center: false,
        modal: true,
        "close-on-click-modal": false,
        // 可根据需要添加更多Element UI Dialog支持的属性
      },
    };
  },
  methods: {
    handleConfirm() {
      console.log("点击确定");
      this.dialogVisible = false;
    },
  },
};
</script>

功能特性

1. 可拖拽：支持通过鼠标拖拽弹窗头部移动位置
2. 自动滚动：当弹窗内容超过可视区域高度时，自动显示滚动条
3. 图标支持：可在标题前显示图标
4. 自定义样式：弹窗头部具有特殊样式，包含顶部蓝色边框和固定定位
5. 灵活配置：通过 elDialogProps 对象可灵活配置 Element UI Dialog 的原生属性

注意事项

1. iconText 属性需要传入 iconfont 字体图标库的 Unicode 编码，如 
2. 弹窗内容区域建议不要使用过高的内容，以免影响用户体验
3. 当需要自定义底部按钮时，请使用 footer 插槽
4. 关闭弹窗时，建议使用 .sync 修饰符来更新父组件中的显示状态
5. elDialogProps 可以包含 Element UI Dialog 组件支持的任何属性，使用 kebab-case 命名法（如 close-on-click-modal）