PromptBox

Demos

<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

Name	Type	Default	Description
`open`	`boolean`	`false`	`.sync` Whether the prompt box is displayed.
`title`	`string`	-	The title of the prompt box.
`content`	`string`	-	The description text above the text input.
`value`	`string`	`''`	`v-model` The value of the prompt input.
`loading`	`boolean=`	`false`	Wehter the prompt box is in loading state. When loading, the OK button will enter loading state as well and become unclickable.
`disabled`	`boolean=`	`false`	Wehter the prompt box is disabled. When disabled, the OK button will be disabled as well and become unclickable.
`ok-label`	`string=`	-	The text content of the “OK” button.
`cancel-label`	`string=`	-	The text content of the “Cancel” button.
`before-close`	`function(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-class`	`string \| Array \| Object=`	-	See the `overlay-class` prop of the `Overlay` component.
`overlay-style`	`string \| Array \| Object=`	-	See the `overlay-style` prop of the `Overlay` component.

Slots

Name	Description
`default`	The content of the prompt box.
`title`	The title of the prompt box. Will ignore the `title` prop when specified.
`foot`	The foot area of the prompt box. Displays an “OK” and a “Cancel” button by default.

Events

Name	Description
`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.
`ok`	Triggered when the “OK” button is clicked.
`cancel`	Triggered when the “Cancel” button is clicked.
`afterclose`	Triggered 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