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

發(fā)布時(shí)間：2020-08-27 17:50:19 來源：腳本之家閱讀：110 作者：答案在風(fēng)中飄著欄目：web開發(fā)

前言

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

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

templat模板結(jié)構(gòu)

<template>
 <div v-show="visible" class="Alert">
  <i v-show="closable" class="iconhandle close" @click="close">&#xe609;</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ù)	說明	類型	可選值	默認(rèn)值
closable	是否可關(guān)閉	boolean	—	true
show	是否顯示	boolean	—	true

Event

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

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽