抽屉 Drawer ​

通过动作触发，从屏幕一端弹出操作面板。

基础用法 ​

通过 v-model 控制抽屉弹出/收起

<template>
  <bp-button @click="handleOpen">Open drawer</bp-button>

  <bp-drawer v-model="show"></bp-drawer>
</template>

<script setup lang="ts">
import { ref } from "vue";

const show = ref(false);

const handleOpen = () => {
  show.value = true;
};
</script>

异步关闭 ​

通过 on-before-ok 控制抽屉的异步关闭功能

<template>
  <bp-button @click="handleOpen">Async close</bp-button>

  <bp-drawer v-model="show" :on-before-ok="handleBeforeOk"></bp-drawer>
</template>

<script setup lang="ts">
import { ref } from "vue";

const show = ref(false);

const handleOpen = () => {
  show.value = true;
};

const handleBeforeOk = async () => {
  await new Promise(resolve => setTimeout(resolve, 2000));
  return true;
};
</script>

Drawer 属性 ​

v-model
抽屉显示状态
Boolean
false
title
抽屉标题
String
标题
title-align
标题对齐方式
Enum
left
width
抽屉宽度
String
600px
hide-footer
是否隐藏底部区域
Boolean
false
hide-close
是否隐藏关闭图标
Boolean
false
border
是否展示边框
Boolean
false
mask-closable
点击遮罩是否关闭
Boolean
false
ok-loading
确认按钮是否处于加载状态
Boolean
false
ok-text
确定按钮内容
String
确认
cancle-text
取消按钮内容
String
取消
on-before-ok
触发确定前的回调，返回 false 则中断
Function
() => true

Drawer 事件 ​

cancle
抽屉取消按钮触发
-
ok
抽屉确定按钮触发
-