VEUI

VEUI on GitHub
Play!EnglishEN

PromptBox 输入弹框

示例

获取用户输入的值。

在 GitHub 上编辑此示例编辑
<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

属性

名称类型默认值描述
openbooleanfalse

.sync

是否显示输入弹框。

titlestring-标题。
contentstring'请输入'输入框上方的说明内容。
valuestring''

v-model

输入框值。

loadingbooleanfalse是否处于加载状态。处于加载状态时确定按钮也将进入加载状态,无法点击。
disabledbooleanfalse是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态,无法点击。
ok-labelstring-“确定”按钮的文字内容。
cancel-labelstring-“取消”按钮的文字内容。
before-closefunction(string): boolean=|Promise<boolean=>-在将触发关闭的操作发生后执行,参考 Dialog 组件的 before-close 属性。
overlay-classstring | Array | Object-参考 Overlay 组件的 overlay-class 属性。
overlay-stylestring | Array | Object-参考 Overlay 组件的 overlay-style 属性。

插槽

名称描述
default内容区。
title标题区。若同时指定了 title 属性和 title 插槽,以后者为准。
foot底部区域,默认会展示“确定”、“取消”按钮。

事件

名称描述
input

v-model

输入框值发生变化后触发。回调参数为 (value: string)value 为输入框当前值。

ok点击“确定”按钮时触发。
cancel点击“取消”按钮时触发。
afteropen弹框打开后触发。弹框内容在打开后才会进行渲染,所以如果有依赖内容渲染的逻辑,请在此事件触发后再执行。
afterclose弹框关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。
在 GitHub 上编辑此页面编辑
© Baidu, Inc. 2024