LdDialog 弹窗组件

对 element-plus 的 el-dialog 组件进行封装

写在前面

LdTable 是从 Vben Admin 迁移过来
Vue-Vben-Admin 是一个基于 Vue3.0、Vite、 Ant-Design-Vue、TypeScript 的后台解决方案

使用

由于 dialog 内部代码一般独立成单独文件，推荐独立成单独文件进行开发，所以示例都是以单独文件进行说明独立组件代码，用于写组件内部的内容

单独组件文件 RoleForm

<template>
  <LdDialog
    v-bind="$attrs"
    title="Dialog Title"
    width="600px"
    isShowFooter
  >
   Dialog Info .
  </LdDialog>
</template>

<script>
import { computed, defineComponent } from "vue";
export default defineComponent({
  name: "RoleForm",
  setup() {
    return {};
  },
});
</script>

页面引用弹窗

<template>
  <div>
    <el-button @click="openDrawer"></el-button>
    <RoleForm @register="register" />
  </div>
</template>
<script>
  import { defineComponent } from 'vue';
  import { useDialog } from '@/components/LdDialog';
  import RoleForm from './RoleForm.vue';

  export default defineComponent({
    name:"RoleIndex",
    components: { RoleForm },
    setup() {
      const [register, { openDialog }] = useDialog();
      return {
        register,
        openDrawer,
      };
    },
  });
</script>

useDialog

useDialog 用于操作组件

const [register, { openDialog, setDialogProps }] = useDialog();

register

原理其实很简单，就是 vue 的组件子传父通信，内部通过 emit("register"，instance) 实现。

同时，独立出去的组件需要将 attrs 绑定到 LdDialog 的上面。

<LdDialog v-bind="$attrs"> Dialog Info. </LdDialog>

openDialog

用于打开/关闭弹窗

// true/false: 打开关闭弹窗
// data: 传递到子组件的数据
openDialog(true, data);

closeDialog

用于关闭弹窗

closeDialog();

setDialogProps

用于更改 dialog 的 props 参数因为 dialog 内容独立成组件，如果在外部页面需要更改 props 可能比较麻烦，所以提供 setDialogProps 方便更改内部 dialog 的 props

Props 内容可以见下方

setDialogProps(props);

useDialogInner

用于独立的 Dialog 内部调用

<template>
  <LdDialog v-bind="$attrs" @register="register" title="Dialog Title" width="50%">
    Dialog Info.
    <el-button type="primary" @click="closeDrawer">内部关闭dialog</el-button>
  </LdDialog>
</template>
<script>
  import { defineComponent } from 'vue';
  import { useDrawerInner } from '@/components/LdDialog';
  export default defineComponent({
    setup() {
      const [register, { closeDrawer }] = useDialogInner();
      return { register, closeDrawer };
    },
  });
</script>

callback

type: (data)=>void

回调函数用于接收 openDialog 第二个参数传递的值

openDialog((data) => {
  console.log(data);
});

closeDialog

用于关闭窗口

closeDialog();

changeOkLoading

用于修改确认按钮的 loading 状态

// true or false
changeOkLoading(true);

changeLoading

用于修改 dialog 的 loading 状态

// true or false
changeLoading(true);

setDialogProps

用于更改 dialog 的 props 参数因为 modal 内容独立成组件，如果在外部页面需要更改 props 可能比较麻烦，所以提供setDialogProps 方便更改内部 dialog 的 props

Props 内容可以见下方

Props

温馨提醒

除以下参数外，官方文档内的 props 也都支持，具体可以参考 el-dialog

属性	类型	默认值	可选值	说明
title	`string`		-	dialog 标题
visible	`boolean`	`false`	-	dialog 显示/隐藏
loading	`boolean`	`false`	-	loading 状态
closeFunc	`() => Promise<boolean>`	-	-	自定义关闭函数，返回`true`关闭，否则不关闭
width	`string\|number`	`50%`	-	dialog 宽度
confirmLoading	`boolean`	`false`	-	提交按钮loading
isShowCancelBtn	`boolean`	`true`	-	显示关闭按钮
cancelButtonProps	`object`	`{}`	-	关闭按钮 el-button props
cancelText	`string`	`取消`	-	关闭按钮文本
isShowOkBtn	`boolean`	`true`	-	显示底部确认按钮
okButtonProps	`object`	`{}`	-	底部确认按钮 el-button props
okText	`string`	`确认`	-	取人按钮文本
okType	`string`	`primary`	-	确认按钮类型 el-button type
isShowFooter	`boolean`	`false`	-	是否显示 el-dialog 底部
footerAlign	`string`	`right`	`left\|center\|right`	底部按钮显示位置

Events

事件	回调参数	说明
close	`(e)=>void`	点击关闭回调
visible-change	`(visible:boolean)=>void`	弹窗打开关闭时触发
ok	`(e)=>void`	点击确定回调

LdDialog 弹窗组件 #

使用 #

单独组件文件 RoleForm #

页面引用弹窗 #

useDialog #

useDialogInner #

Props #

Events #