PromptBox 输入弹框
示例
获取用户输入的值。
<template>
<article>
<veui-button @click="open = true">
Prompt
</veui-button>
<veui-prompt-box
v-model="value"
title="Survey"
:open.sync="open"
@cancel="cancel"
@ok="ok"
>
What's your favorite food?
</veui-prompt-box>
</article>
</template>
<script>
import { PromptBox, Button, toast } from 'veui'
export default {
components: {
'veui-prompt-box': PromptBox,
'veui-button': Button
},
data () {
return {
value: '',
open: false
}
},
methods: {
ok () {
this.open = false
toast.info('Input: ' + (this.value || "''"))
},
cancel () {
toast.info('Canceled')
}
}
}
</script>
API
属性
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
open | boolean | false |
是否显示输入弹框。 |
title | string | - | 标题。 |
content | string | '请输入' | 输入框上方的说明内容。 |
value | string | '' |
输入框值。 |
loading | boolean | false | 是否处于加载状态。处于加载状态时确定按钮也将进入加载状态,无法点击。 |
disabled | boolean | false | 是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态,无法点击。 |
ok-label | string | - | “确定”按钮的文字内容。 |
cancel-label | string | - | “取消”按钮的文字内容。 |
before-close | function(string): boolean=|Promise<boolean=> | - | 在将触发关闭的操作发生后执行,参考 Dialog 组件的 before-close 属性。 |
overlay-class | string | Array | Object | - | 参考 Overlay 组件的 overlay-class 属性。 |
overlay-style | string | Array | Object | - | 参考 Overlay 组件的 overlay-style 属性。 |
插槽
名称 | 描述 |
---|---|
default | 内容区。 |
title | 标题区。若同时指定了 title 属性和 title 插槽,以后者为准。 |
foot | 底部区域,默认会展示“确定”、“取消”按钮。 |
事件
名称 | 描述 |
---|---|
input |
输入框值发生变化后触发。回调参数为 |
ok | 点击“确定”按钮时触发。 |
cancel | 点击“取消”按钮时触发。 |
afteropen | 弹框打开后触发。弹框内容在打开后才会进行渲染,所以如果有依赖内容渲染的逻辑,请在此事件触发后再执行。 |
afterclose | 弹框关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。 |