VEUI

VEUI on GitHub
中文

PromptBox

Demos

Edit this demo on GitHubEdit
<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

Props

NameTypeDefaultDescription
openbooleanfalse

.sync

Whether the prompt box is displayed.

titlestring-The title of the prompt box.
contentstring-The description text above the text input.
valuestring''

v-model

The value of the prompt input.

loadingboolean=falseWehter the prompt box is in loading state. When loading, the OK button will enter loading state as well and become unclickable.
disabledboolean=falseWehter the prompt box is disabled. When disabled, the OK button will be disabled as well and become unclickable.
ok-labelstring=-The text content of the “OK” button.
cancel-labelstring=-The text content of the “Cancel” button.
before-closefunction(string): boolean=|Promise<boolean=>-Executed when user interaction is about to trigger closing the prompt box. See the before-close prop of the Dialog component.
overlay-classstring | Array | Object=-See the overlay-class prop of the Overlay component.
overlay-stylestring | Array | Object=-See the overlay-style prop of the Overlay component.

Slots

NameDescription
defaultThe content of the prompt box.
titleThe title of the prompt box. Will ignore the title prop when specified.
footThe foot area of the prompt box. Displays an “OK” and a “Cancel” button by default.

Events

NameDescription
input

v-model

Triggered when the input value changes. The callback parameter list is (value: string) with value being the current value of the input.

okTriggered when the “OK” button is clicked.
cancelTriggered when the “Cancel” button is clicked.
afteropenTriggered after the box overlay is opened. The box content won't be rendered until after the overlay is opened, so if there is logic that depends on content rendering, please execute it after this event is triggered.
aftercloseTriggered after the box overlay is closed. If leaving transition is provided by the theme, the event will be triggered after the transition completes.
Edit this page on GitHubEdit
© Baidu, Inc. 2023