AlertBox

<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 slot="title">
      Success
    </template>
    <div>Saved successfully!</div>
  </veui-alert-box>

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

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

<script>
import AlertBox from 'veui/components/AlertBox'
import Button from 'veui/components/Button'

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

<template>
<article>
  <veui-button @click="open1 = true">
    <code>title</code> prop
  </veui-button>
  <veui-button @click="open2 = true">
    <code>title</code> slot
  </veui-button>

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

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

<script>
import AlertBox from 'veui/components/AlertBox'
import Button from 'veui/components/Button'
import Icon from 'veui/components/Icon'
import 'veui-theme-one-icons/info-circle'
import toast from 'veui/managers/toast'

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>