AlertBox 警告弹框

示例

类型

AlertBox 有三种类型,分别是 infosuccesserror,可以通过 type 属性指定不同的类型。

在 GitHub 上编辑此页编辑
<template>
<article>
  <veui-button @click="successOpen = true">
    Success
  </veui-button>
  <veui-button @click="errorOpen = true">
    Error
  </veui-button>
  <veui-button @click="infoOpen = true">
    Info
  </veui-button>

  <veui-alert-box
    type="success"
    :open.sync="successOpen"
  >
    <template #title>
      Success
    </template>
    <div>Saved successfully!</div>
  </veui-alert-box>

  <veui-alert-box
    type="error"
    :open.sync="errorOpen"
  >
    <template #title>
      Error
    </template>
    <div>Not enough disk space!</div>
  </veui-alert-box>

  <veui-alert-box
    type="info"
    :open.sync="infoOpen"
  >
    <template #title>
      Sytstem
    </template>
    <div>The total available storage is 5MB.</div>
  </veui-alert-box>
</article>
</template>

<script>
import { AlertBox, Button } from 'veui'

export default {
  components: {
    'veui-alert-box': AlertBox,
    'veui-button': Button
  },
  data () {
    return {
      successOpen: false,
      errorOpen: false,
      infoOpen: false
    }
  }
}
</script>

<style lang="less" scoped>
.veui-button {
  margin-right: 10px;
}
</style>

标题

可以通过 title 属性或 title 插槽自定义警告弹框的标题。

在 GitHub 上编辑此页编辑
<template>
<article>
  <veui-button @click="open1 = true">
    title prop
  </veui-button>
  <veui-button @click="open2 = true">
    title slot
  </veui-button>

  <veui-alert-box
    type="success"
    :open.sync="open1"
    title="Success"
    @ok="ok"
  >
    <p>Saved successfully!</p>
  </veui-alert-box>

  <veui-alert-box
    type="success"
    :open.sync="open2"
    @ok="ok"
  >
    <template #title>
      Success
      <veui-icon name="info-circle"/>
    </template>
    <p>Saved successfully!</p>
  </veui-alert-box>
</article>
</template>

<script>
import { AlertBox, Button, Icon, toast } from 'veui'
import 'veui-theme-dls-icons/info-circle'

export default {
  components: {
    'veui-alert-box': AlertBox,
    'veui-button': Button,
    'veui-icon': Icon
  },
  data () {
    return {
      open1: false,
      open2: false
    }
  },
  methods: {
    ok () {
      toast.info('Confirmed')
    }
  }
}
</script>

<style lang="less" scoped>
.veui-button {
  margin-right: 10px;
}

.icon {
  vertical-align: -2px;
}
</style>

API

属性

名称类型默认值描述
openbooleanfalse

.sync

是否显示警告弹框。

typestring='success'

警告框类型。

描述
info信息提示样式。
success成功样式。
error错误样式。
titlestring=-标题。
loadingboolean=false是否处于加载状态。处于加载状态时确定按钮也将进入加载状态,无法点击。
disabledboolean=false是否处于禁用状态。处于禁用状态时确定按钮也将进入禁用状态,无法点击。
ok-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底部区域,默认会展示一个“知道了”按钮。

事件

名称描述
ok点击“知道了”按钮触发。
afterclose浮层关闭后触发。如果样式主题提供了退出动画,将在退出动画完毕后触发。

图标

名称描述
info普通信息。
success成功状态。
error错误状态。
在 GitHub 上编辑此页编辑