1. Alert警告

1.1. Alert警告用于頁面中展示重要的提示信息。

1.2. Attributes

參數(shù)	說明	類型	可選值	默認(rèn)值
title	標(biāo)題	string	無	無
type	主題	string	success/warning/info/error	info
description	輔助性文字。也可通過默認(rèn)slot傳入	string	無	無
closable	是否可關(guān)閉	boolean	無	true
center	文字是否居中	boolean	無	true
close-text	關(guān)閉按鈕自定義文本	string	無	無
show-icon	是否顯示圖標(biāo)	boolean	無	false
effect	選擇提供的主題	string	light/dark	light

1.3. Slot

name	說明
—	描述
title	標(biāo)題的內(nèi)容

1.4. Events

事件名	說明	回調(diào)參數(shù)
close	關(guān)閉alert時觸發(fā)的事件	無

2. Alert警告例子

2.1. 使用腳手架新建一個名為element-ui-alert的前端項目, 同時安裝Element插件。

2.2. 編輯index.js?

import Vue from 'vue' import VueRouter from 'vue-router' import BaseAlert from '../components/BaseAlert.vue' import EffectAlert from '../components/EffectAlert.vue' import ClosableAlert from '../components/ClosableAlert.vue' import IconAlert from '../components/IconAlert.vue' import CenterAlert from '../components/CenterAlert.vue' import DescriptionAlert from '../components/DescriptionAlert.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/BaseAlert' },{ path: '/BaseAlert', component: BaseAlert },{ path: '/EffectAlert', component: EffectAlert },{ path: '/ClosableAlert', component: ClosableAlert },{ path: '/IconAlert', component: IconAlert },{ path: '/CenterAlert', component: CenterAlert },{ path: '/DescriptionAlert', component: DescriptionAlert } ]const router = new VueRouter({routes })export default router

2.3. 在components下創(chuàng)建BaseAlert.vue

<template><div><h1>基本用法</h1><h4>頁面中的非浮層元素, 不會自動消失。Alert組件提供四種主題, 由type屬性指定, 默認(rèn)值為info。</h4><el-alert title="成功提示的文案" type="success"></el-alert><el-alert title="消息提示的文案" type="info"></el-alert><el-alert title="警告提示的文案" type="warning"></el-alert><el-alert title="錯誤提示的文案" type="error"></el-alert></div> </template><style scoped> .el-alert + .el-alert {margin-top: 20px; } </style>

2.4. 在components下創(chuàng)建EffectAlert.vue

<template><div><h1>主題</h1><h4>Alert組件提供了兩個不同的主題: light和dark。通過設(shè)置effect屬性來改變主題, 默認(rèn)為light。</h4><el-alert title="成功提示的文案" type="success" effect="dark"></el-alert><el-alert title="消息提示的文案" type="info" effect="dark"></el-alert><el-alert title="警告提示的文案" type="warning" effect="dark"></el-alert><el-alert title="錯誤提示的文案" type="error" effect="dark"></el-alert></div> </template><style scoped> .el-alert + .el-alert {margin-top: 20px; } </style>

2.5. 在components下創(chuàng)建ClosableAlert.vue

<template><div><h1>自定義關(guān)閉按鈕-自定義關(guān)閉按鈕為文字或其他符號</h1><h4>在Alert組件中, 你可以設(shè)置是否可關(guān)閉, 關(guān)閉按鈕的文本以及關(guān)閉時的回調(diào)函數(shù)。closable屬性決定是否可關(guān)閉, 接受boolean, 默認(rèn)為true。你可以設(shè)置close-text屬性來代替右側(cè)的關(guān)閉圖標(biāo), 注意: close-text必須為文本。設(shè)置close事件來設(shè)置關(guān)閉時的回調(diào)。</h4><el-alert title="不可關(guān)閉的 alert" type="success" :closable="false"></el-alert><el-alert title="自定義 close-text" type="info" close-text="知道了"></el-alert><el-alert title="設(shè)置了回調(diào)的 alert" type="warning" @close="hello"></el-alert></div> </template><script> export default {methods: {hello () {alert('Hello World!')}} } </script><style scoped> .el-alert + .el-alert {margin-top: 20px; } </style>

2.6. 在components下創(chuàng)建IconAlert.vue

<template><div><h1>帶有icon-表示某種狀態(tài)時提升可讀性</h1><h4>通過設(shè)置show-icon屬性來顯示Alert的icon, 這能更有效地向用戶展示你的顯示意圖。</h4><el-alert title="成功提示的文案" type="success" show-icon></el-alert><el-alert title="消息提示的文案" type="info" show-icon></el-alert><el-alert title="警告提示的文案" type="warning" show-icon></el-alert><el-alert title="錯誤提示的文案" type="error" show-icon></el-alert></div> </template><style scoped> .el-alert + .el-alert {margin-top: 20px; } </style>

2.7. 在components下創(chuàng)建CenterAlert.vue

<template><div><h1>文字居中</h1><h4>使用center屬性讓文字水平居中。</h4><el-alert title="成功提示的文案" type="success" center show-icon></el-alert><el-alert title="消息提示的文案" type="info" center show-icon></el-alert><el-alert title="警告提示的文案" type="warning" center show-icon></el-alert><el-alert title="錯誤提示的文案" type="error" center show-icon></el-alert></div> </template><style scoped> .el-alert + .el-alert {margin-top: 20px; } </style>

2.8. 在components下創(chuàng)建DescriptionAlert.vue

<template><div><h1>帶有輔助性文字介紹-包含標(biāo)題和內(nèi)容, 解釋更詳細(xì)的警告</h1><h4>除了必填的title屬性外, 你可以設(shè)置description屬性來幫助你更好地介紹, 我們稱之為輔助性文字。輔助性文字只能存放單行文本, 會自動換行顯示。</h4><el-alert title="帶輔助性文字介紹" type="success" description="這是一句繞口令: 黑灰化肥會揮發(fā)發(fā)灰黑化肥揮發(fā); 灰黑化肥會揮發(fā)發(fā)黑灰化肥發(fā)揮。黑灰化肥會揮發(fā)發(fā)灰黑化肥黑灰揮發(fā)化為灰..."></el-alert></div> </template>

2.9. 運行項目, 訪問http://localhost:8080/#/BaseAlert

2.10. 運行項目, 訪問http://localhost:8080/#/EffectAlert?

2.11. 運行項目, 訪問http://localhost:8080/#/ClosableAlert?

2.12. 運行項目, 訪問http://localhost:8080/#/IconAlert?

2.13. 運行項目, 訪問http://localhost:8080/#/CenterAlert

?

2.14. 運行項目, 訪問http://localhost:8080/#/DescriptionAlert

總結(jié)

以上是生活随笔為你收集整理的028_Alert警告的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。