BDrawer 抽屉

封装优化

• 默认 width = 720
• 默认 destroyOnClose 关闭后销毁
• 默认 maskClosable 点击边框不可关闭
• 默认 footer 底部脚为默认null, 用内置的；
• 默认 cancelText 取消文本；
• 默认 okText 确认文本；
• 默认 okButtonProps 确认按钮属性样式；
• 默认 confirmLoading 确认加载loading；

安装注册

import { BDrawer } from '@bdp/ui-vue';
Vue.use(BDrawer);

基本使用

代码演示

Content of the BDrawer

<template>
    <a-button type="primary" @click="open">Open BDrawer</a-button>
    <BDrawer 
        v-model="visible"
    >
        <div style="height: 90vh">
            Content of the BDrawer
        </div>
    </BDrawer>
</template>

<script>
export default {
    data() {
        return {
            visible: false
        }
    },
    methods: {
        open () {
            this.visible = true
        },
        handleCancel () {
            this.visible = false
        },
    }
}
</script>

API

差异

参数	说明	类型	默认值	版本
width	默认宽度	number	720
destroyOnClose	默认关闭户销毁	boolean	false
maskClosable	默认点击蒙层是否允许关闭	boolean	false
footer	Modal footer 底部操作样式	vnode	null
cancelText	Modal footer 取消按钮文字	string	取消
okText	Modal footer 确认按钮文字	string	确认
okButtonProps	Modal footer 确认按属性样式	object	{ }
confirmLoading	Modal footer 确定按钮加载中	boolean	false

更多属性请参考 ant-design-vue/drawer (opens new window)。

封装优化

安装注册

基本使用

API