前言
本文主要Alert 組件的大致框架, 提供少量可配置選項。 旨在大致提供思路
Alert

用于頁面中展示重要的提示信息。
templat模板結構
<template> <div v-show="visible" class="Alert"> <i v-show="closable" class="iconhandle close" @click="close"></i> <slot></slot> </div></template>
大致結構 alert框,icon圖標, slot插值 (其他樣式顏色選項...)
如果需要動畫 可以在外層包上Vue內置組件transition
<transition name="alert-fade"></transition>
script
export default { name: 'Alert', props: { closable: { type: Boolean, default: true }, show: { type: Boolean, default: true, twoWay: true }, type: { type: String, default: 'info' } }, data() { return { visible: this.show }; }, methods: { close() { this.visible = false; this.$emit('update:show', false); this.$emit('close'); } }};點擊關閉 向外暴露2個事件
使用
import Alert from './Alert.vue'Alert.install = function(Vue){ Vue.component('Alert', Alert);}export default Alert<Alert :closable="false"> 這是一個不能關閉的alert</Alert><Alert> 這是一個可以關閉的alert</Alert>
Attribute
| 參數 | 說明 | 類型 | 可選值 | 默認值 |
|---|---|---|---|---|
| closable | 是否可關閉 | boolean | ― | true |
| show | 是否顯示 | boolean | ― | true |
Event
| 事件名稱 | 說明 | 回調參數 |
|---|---|---|
| update:show | 關閉時觸發,是否顯示false | false |
| close | 關閉時觸發 | ― |
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。
新聞熱點
疑難解答