BModal 对话框

封装优化

• 默认 width = 720
• 默认 destroyOnClose 关闭后销毁
• 默认 maskClosable 点击边框不可关闭
• 设置 bodyStyle 高度固定，可以滚动；

安装注册

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

基本使用

代码演示

Content of the BModal

<template>
    <a-button type="primary" @click="open">Open BModal</a-button>
    <BModal 
        v-model="visible" 
        title="BModal"
    >
        <div style="height: 90vh">
            Content of the BModal
        </div>
    </BModal>
</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
bodyStyle	Modal body 样式	object	{ maxHeight: '55vh', overflow: 'auto'}

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

封装优化

安装注册

基本使用

API