BiuDialog 弹框

通常用来显示数据较少的详情页。

提示

关于 footer 的更多用法可以查看 Operation 组件

<template>
    <div>
        <el-button @click="show = true">查看详情</el-button>
        <el-button @click="add.show = true">添加</el-button>

        <biu-dialog title="订单详情" :visible.sync="show" footer>
            <pre>
                哈哈哈
                哈哈哈
                哈哈哈
                哈哈哈
                哈哈哈
                哈哈哈
            </pre>
        </biu-dialog>

        <biu-dialog title="添加" :visible.sync="add.show" :footer="footer">
            <pre>
                你可以

                展示

                你想展示的
            </pre>
        </biu-dialog>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { OperationOptionType } from 'calm-harbin/types/operation'

@Component
export default class BiuDialogDemo extends Vue {
    show = false

    add = {
        show: false
    }

    loading = false

    get footer(): OperationOptionType[] {
        return [
            {
                title: '确认',
                loading: this.loading,
                callback: () => {
                    this.loading = true
                    setTimeout(() => {
                        this.$notify({
                            title: '提交成功',
                            message: '成功添加一条运单',
                            type: 'success'
                        })
                        this.loading = false
                        this.add.show = false
                    }, 1000)
                }
            }
        ]
    }
}
</script>

显示代码

属性

参数	说明	必填	类型	默认值
title	标题		string	—
visible	是否显示		boolean	—
btnLoading	控制所有按钮的 loading 状态		boolean	—
footer	按钮配置		OperationOptionType[] | boolean	—
dialogDrag	关闭拖拽		boolean	—
dialogDragWidth	关闭宽度改变		boolean	—