vue組件之Alert的實(shí)現(xiàn)代碼
更新時(shí)間：2017年10月17日 10:33:36 作者：答案在風(fēng)中飄著
本篇文章主要介紹了vue組件之Alert的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
前言
本文主要Alert 組件的大致框架， 提供少量可配置選項(xiàng)。 旨在大致提供思路
Alert
用于頁(yè)面中展示重要的提示信息。
templat模板結(jié)構(gòu)
<template> <div v-show="visible" class="Alert"> <i v-show="closable" class="iconhandle close" @click="close"></i> <slot></slot> </div> </template>
大致結(jié)構(gòu) alert框，icon圖標(biāo)， slot插值 （其他樣式顏色選項(xiàng)...）
如果需要?jiǎng)赢?可以在外層包上Vue內(nèi)置組件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');
}
}
};
- name: 組件的名字
- props: 屬性
- methods: 方法
點(diǎn)擊關(guān)閉 向外暴露2個(gè)事件
使用
import Alert from './Alert.vue'
Alert.install = function(Vue){
Vue.component('Alert', Alert);
}
export default Alert
<Alert :closable="false"> 這是一個(gè)不能關(guān)閉的alert </Alert> <Alert> 這是一個(gè)可以關(guān)閉的alert </Alert>
Attribute
| 參數(shù) | 說(shuō)明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| closable | 是否可關(guān)閉 | boolean | — | true |
| show | 是否顯示 | boolean | — | true |
Event
| 事件名稱 | 說(shuō)明 | 回調(diào)參數(shù) |
|---|---|---|
| update:show | 關(guān)閉時(shí)觸發(fā)，是否顯示false | false |
| close | 關(guān)閉時(shí)觸發(fā) | — |
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue+Vuex實(shí)現(xiàn)自動(dòng)登錄的知識(shí)點(diǎn)詳解
在本篇文章里小編給大家整理的是關(guān)于Vue+Vuex實(shí)現(xiàn)自動(dòng)登錄的知識(shí)點(diǎn)詳解，需要的朋友們可以學(xué)習(xí)下。2020-03-03
vue+element實(shí)現(xiàn)動(dòng)態(tài)加載表單
這篇文章主要為大家詳細(xì)介紹了vue+element實(shí)現(xiàn)動(dòng)態(tài)加載表單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
Element實(shí)現(xiàn)復(fù)雜table表格結(jié)構(gòu)的項(xiàng)目實(shí)踐
本文主要介紹了Element實(shí)現(xiàn)復(fù)雜table表格結(jié)構(gòu)的項(xiàng)目實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
在Vue中,有兩種常用的CSS選擇器,用于修改組件樣式：scoped?和?/deep/（或?::v-deep）,它們都是為了實(shí)現(xiàn)樣式的作用域,本文小編就來(lái)分別給大家介紹一下這兩種選擇器的原理,需要的朋友可以參考下2023-08-08
Springboot+Vue-Cropper實(shí)現(xiàn)頭像剪切上傳效果
這篇文章主要為大家詳細(xì)介紹了Springboot+Vue-Cropper實(shí)現(xiàn)頭像剪切上傳效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vuex state中同步數(shù)據(jù)和異步數(shù)據(jù)方式
這篇文章主要介紹了Vuex state中同步數(shù)據(jù)和異步數(shù)據(jù)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vue路由跳轉(zhuǎn)后刷新指定頁(yè)面的方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue非父子組件通信問(wèn)題及解決方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
路由跳轉(zhuǎn)的同時(shí)傳遞參數(shù)是比較常見(jiàn)的,下面這篇文章主要給大家介紹了關(guān)于vue3路由配置以及路由跳轉(zhuǎn)傳參的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
一文了解Vue 3 的 generate 是這樣生成 render&n
本文介紹generate階段是如何根據(jù)javascript AST抽象語(yǔ)法樹(shù)生成render函數(shù)字符串的,本文中使用的vue版本為3.4.19,感興趣的朋友跟隨小編一起看看吧2024-06-06