Alert 提示

<template>
<article>
  <veui-alert
    class="alert"
    status="success"
  >
    Your profile has been updated.
  </veui-alert>
  <veui-alert
    class="alert"
    status="info"
  >
    Press any key to continue...
  </veui-alert>
  <veui-alert
    class="alert"
    status="warning"
  >
    <code>slot-scope</code> is deprecated. Use <code>v-slot</code> instead.
  </veui-alert>
  <veui-alert
    class="alert"
    status="error"
    message="Uncaught SyntaxError: Unexpected token +"
  />
</article>
</template>

<script>
import { Alert } from 'veui'

export default {
  components: {
    'veui-alert': Alert
  }
}
</script>

<style lang="less" scoped>
.alert {
  margin-bottom: 20px;
}
</style>

<template>
<article>
  <veui-alert
    type="info"
    close-label="Got it"
    closable
    :open.sync="open"
    :message="messages"
  />
  <section v-if="!open">
    <veui-button @click="open = true">
      Open
    </veui-button>
  </section>
</article>
</template>

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

export default {
  components: {
    'veui-alert': Alert,
    'veui-button': Button
  },
  data () {
    return {
      open: true,
      messages: [
        'Component data must be a function.',
        'Prop definitions should be as detailed as possible.',
        'Always use key with v-for.',
        'Never use v-if on the same element as v-for.'
      ]
    }
  }
}
</script>

<template>
<article>
  <veui-alert
    class="alert"
    status="success"
    title="消息标题"
  >
    Your profile has been updated.
  </veui-alert>
  <veui-alert
    class="alert"
    status="success"
  >
    Your profile has been updated.
    <template #title>
      消息标题
    </template>
  </veui-alert>
</article>
</template>

<script>
import { Alert } from 'veui'

export default {
  components: {
    'veui-alert': Alert
  }
}
</script>

<style lang="less" scoped>
.alert {
  margin-bottom: 20px;
}
</style>

<template>
<article>
  <veui-alert
    class="alert"
    status="success"
    ui="strong"
    message="恭喜你，你的请求已成功处理"
    closable
  >
    <template #title>
      恭喜你
    </template>
    <template #extra>
      <veui-button ui="text">
        查看详情
      </veui-button>
    </template>
    恭喜你，你的请求已成功处理
  </veui-alert>
</article>
</template>

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

export default {
  components: {
    'veui-alert': Alert,
    'veui-button': Button
  }
}
</script>

<style lang="less" scoped>
.alert {
  margin-bottom: 20px;
}
</style>