ConfirmBox 确认弹框
示例
自定义标题和内容区。
<template>
<article>
<veui-button @click="open = true">
Remove
</veui-button>
<veui-confirm-box
title="System Notification"
:open.sync="open"
@ok="ok"
@cancel="cancel"
>
<p>Are you sure to remove the item?</p>
</veui-confirm-box>
</article>
</template>
<script>
import { ConfirmBox, Button } from 'veui'
import toast from 'veui/managers/toast'
export default {
components: {
'veui-confirm-box': ConfirmBox,
'veui-button': Button
},
data () {
return {
open: false
}
},
methods: {
ok () {
this.open = false
toast.info('Confirmed')
},
cancel () {
toast.info('Canceled')
}
}
}
</script>
API
属性
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
open | boolean | false |
是否显示确认弹框。 |
title | string | - | 标题。 |
overlay-class | string|Array|Object | - | 参考 Overlay 组件的 overlay-class 属性。 |
插槽
名称 | 描述 |
---|---|
default | 内容区。 |
title | 标题区。若同时指定了 title 属性和 title 插槽,以后者为准。 |
foot | 底部区域,默认会展示“确定”、“取消”按钮。 |
事件
名称 | 描述 |
---|---|
ok | 点击“确定”按钮时触发。 |
cancel | 点击“取消”按钮时触发。 |
afterclose | 浮层关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。 |