Vben Admin

Drawer 抽屉组件

对 antv 的 drawer 组件进行封装，扩展拖拽，全屏，自适应高度等功能。

Usage

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

独立组件代码，用于写组件内部的内容

<template>
  <BasicDrawer v-bind="$attrs" title="Drawer Title" width="50%"> Drawer Info. </BasicDrawer>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { BasicDrawer } from '/@/components/Drawer';
  export default defineComponent({
    components: { BasicDrawer },
  });
</script>

页面引用弹窗

<template>
  <div>
    <Drawer @register="register" />
  </div>
</template>
<script lang="ts">
  import { defineComponent } from 'vue';
  import { Alert } from 'ant-design-vue';
  import { useDrawer } from '/@/components/Drawer';
  import Drawer from './Drawer.vue';

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

useDrawer

useDrawer 用于操作组件

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

register

register 用于注册 useDrawer，如果需要使用 useDrawer 提供的 api，必须将 register 传入组件的 onRegister。

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

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

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

openDrawer

用于打开/关闭弹窗

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

closeDrawer

用于关闭弹窗

closeDrawer();

setDrawerProps

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

Props 内容可以见下方

setDrawerProps(props);

useDrawerInner

用于独立的 Drawer 内部调用

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

useModalInner用于操作独立组件

const [register, { closeModal, setModalProps }] = useModalInner(callback);

callback

type: (data:any)=>void

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

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

closeDrawer

用于关闭抽屉

closeDrawer();

changeOkLoading

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

// true or false
changeOkLoading(true);

changeLoading

用于修改 modal 的 loading 状态

// true or false
changeLoading(true);

setDrawerProps

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

Props 内容可以见下方

Props

温馨提醒

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

属性类型默认值可选值说明
isDetailbooleanfalse-是否为详情模式
loadingbooleanfalse-loading 状态
loadingTextstring``-loading 文本 s
showDetailBackbooleantrue-isDetail=true 状态下是否显示返回按钮
closeFunc() => Promise<boolean>--自定义关闭函数，返回true关闭，否则不关闭
showFooterboolean--是否显示底部
footerHeightnumber60-底部区域高度

Events

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