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 } from 'veui'
import toast from 'veui/managers/toast'

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.
`overlay-class`	`string\|Array\|Object`	-	See the `overlay-class` prop of `Overlay`.

Slots

Name	Description
`default`	The content of the prompt box.
`title`	The title of the prompt box. Will ignore `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.