LdDrawer 抽屉

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

写在前面

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

使用

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

单独组件文件 RoleForm

<template>
  <LdDrawer
    v-bind="$attrs"
    title="Drawer Title"
    width="600px"
    isShowFooter
  >
   Drawer Info .
  </LdDrawer>
</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 { useDrawer } from '@/components/LdDrawer';
  import RoleForm from './RoleForm.vue';

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

useDrawer

useDrawer 用于操作组件

const [register, { openDrawer, setDrawerProps }] = useDrawer();

register

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

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

<LdDrawer v-bind="$attrs"> Drawer Info. </LdDrawer>

openDrawer

用于打开/关闭弹窗

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

closeDrawer

用于关闭弹窗

closeDrawer();

setDrawerProps

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

Props 内容可以见下方

setDrawerProps(props);

useDrawerInner

用于独立的 Drawer 内部调用

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

callback

type: (data)=>void

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

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

closeDrawer

用于关闭窗口

closeDrawer();

changeOkLoading

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

// true or false
changeOkLoading(true);

changeLoading

用于修改 drawer 的 loading 状态

// true or false
changeLoading(true);

setDrawerProps

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

Props 内容可以见下方

Props

温馨提醒

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

属性	类型	默认值	可选值	说明
title	`string`		-	Drawer 标题
visible	`boolean`	`false`	-	Drawer 显示/隐藏
loading	`boolean`	`false`	-	loading 状态
closeFunc	`() => Promise<boolean>`	-	-	自定义关闭函数，返回`true`关闭，否则不关闭
size	`string\|number`	`50%`	-	Drawer 宽度
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-drawer 底部
footerAlign	`string`	`right`	`left\|center\|right`	底部按钮显示位置

Events

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

LdDrawer 抽屉 #

使用 #

单独组件文件 RoleForm #

页面引用弹窗 #

useDrawer #

useDrawerInner #

Props #

Events #