Vue DevUI
主题

Alert 警告

显示警告信息，需要用户关注的信息的组件。

何时使用

当页面需要向用户发出警告信息时。

基本用法

共有四种样式：success、danger、warning、info。

success
danger
warning
info
simple 
<template>
  <div class="alert-demo-1">
    <d-alert type="success" :closeable="false">success</d-alert>
    <d-alert type="danger" :closeable="false">danger</d-alert>
    <d-alert type="warning" :closeable="false">warning</d-alert>
    <d-alert type="info" :closeable="false">info</d-alert>
    <d-alert type="simple" :closeable="false">simple</d-alert>
  </div>
</template>
<style scoped>
.alert-demo-1 > * {
  margin-bottom: 20px;
}
</style>

可关闭的提示

显示关闭按钮，点击可关闭提示。

success
danger
warning
info
simple 
<template>
  <div class="alert-demo-2">
    <d-alert type="success" @close="handleClose">success</d-alert>
    <d-alert type="danger" @close="handleClose">danger</d-alert>
    <d-alert type="warning" @close="handleClose">warning</d-alert>
    <d-alert type="info" @close="handleClose">info</d-alert>
    <d-alert type="simple" @close="handleClose">simple</d-alert>
  </div>
</template>
<script>
export default {
  setup() {
    const handleClose = ($event) => {
      console.log($event);
    };
    return {
      handleClose,
    };
  },
};
</script>
<style scoped>
.alert-demo-2 > * {
  margin-bottom: 20px;
}
</style>

不使用默认图标

不使用默认的类型图标。

success
danger
warning
info
simple 
<template>
  <div class="alert-demo-3">
    <d-alert type="success" :show-icon="false">success</d-alert>
    <d-alert type="danger" :show-icon="false">danger</d-alert>
    <d-alert type="warning" :show-icon="false">warning</d-alert>
    <d-alert type="info" :show-icon="false">info</d-alert>
    <d-alert type="simple" :show-icon="false">simple</d-alert>
  </div>
</template>
<style scoped>
.alert-demo-3 > * {
  margin-bottom: 20px;
}
</style>

文字居中

success
danger
warning
info
simple 
<template>
  <div class="alert-demo-4">
    <d-alert type="success" center>success</d-alert>
    <d-alert type="danger" center>danger</d-alert>
    <d-alert type="warning" center>warning</d-alert>
    <d-alert type="info" center>info</d-alert>
    <d-alert type="simple" center>simple</d-alert>
  </div>
</template>
<style scoped>
.alert-demo-4 > * {
  margin-bottom: 20px;
}
</style>

Alert 参数

参数名类型默认说明跳转 Demo
typeAlertType'info'必选，指定警告提示的样式基本用法
css-classstring--可选，自定义 class 名
closeablebooleantrue可选，默认显示关闭按钮基本用法
dismiss-timenumber--可选，自动关闭 alert 的延迟时间（ms）
show-iconbooleantrue可选，是否使用默认的类型图标不使用默认图标
centerbooleanfalse可选，是否使文字居中显示文字居中

Alert 事件

事件名类型说明跳转 Demo
close(event?: MouseEvent) => void可选，关闭时触发的回调函数可关闭的提示

Alert 类型定义

AlertType

默认值为'info'， 指定 alert 警告提示的类型

type AlertType = 'success' | 'danger' | 'warning' | 'info' | 'simple';
Contributors
粤A2-20044005号