vue組件之Alert的實現(xiàn)代碼

更新時間：2017年10月17日 10:33:36 作者：答案在風中飄著

本篇文章主要介紹了vue組件之Alert的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

前言

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

Alert

用于頁面中展示重要的提示信息。

templat模板結構

<template>
 <div v-show="visible" class="Alert">
  <i v-show="closable" class="iconhandle close" @click="close">&#xe609;</i>
  <slot></slot>
 </div>
</template>

大致結構 alert框，icon圖標， slot插值（其他樣式顏色選項...）

如果需要動畫可以在外層包上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: 方法

點擊關閉向外暴露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

參數(shù)	說明	類型	可選值	默認值
closable	是否可關閉	boolean	—	true
show	是否顯示	boolean	—	true

Event

事件名稱	說明	回調參數(shù)
update:show	關閉時觸發(fā)，是否顯示false	false
close	關閉時觸發(fā)	—

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
Alert

vue.js中引入vuex儲存接口數(shù)據(jù)及調用的詳細流程
這篇文章主要給大家介紹了關于在vue.js中引入vuex儲存接口數(shù)據(jù)及調用的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。
2017-12-12
vue中h5端打開app(判斷是安卓還是蘋果)
這篇文章主要介紹了vue中h5端打開app(判斷是安卓還是蘋果),文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2021-02-02
Vue實現(xiàn)兄弟組件間的聯(lián)動效果
這篇文章主要介紹了Vue實現(xiàn)兄弟組件間的聯(lián)動效果，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下
2020-01-01
vue如何判斷安卓還是IOS
這篇文章主要介紹了vue如何判斷安卓還是IOS，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04
vue性能優(yōu)化之cdn引入vue-Router的問題
這篇文章主要介紹了vue性能優(yōu)化之cdn引入vue-Router的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue自定義指令用法經(jīng)典實例小結
這篇文章主要介紹了vue自定義指令用法,結合實例形式總結分析了vue自定義指令常見寫法與相關操作注意事項,需要的朋友可以參考下
2019-03-03
安裝vue無法運行、此系統(tǒng)無法運行腳本問題及解決
這篇文章主要介紹了安裝vue無法運行、此系統(tǒng)無法運行腳本問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-03-03
vue使用mui遇到的坑及解決
這篇文章主要介紹了vue使用mui遇到的坑及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-03-03
Vue自定義指令實現(xiàn)彈窗拖拽四邊拉伸及對角線拉伸效果
小編最近在做一個vue前端項目，需要實現(xiàn)彈窗的拖拽，四邊拉伸及對角線拉伸，以及彈窗邊界處理功能，本文通過實例代碼給大家分享我的實現(xiàn)過程及遇到問題解決方法，感興趣的朋友一起看看吧
2021-08-08
前端實現(xiàn)簡單的sse封裝方式(React hook Vue3)
這篇文章主要介紹了前端實現(xiàn)簡單的sse封裝方式(React hook Vue3),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-08-08