vue组件之Alert的实现代码

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

<transition name="alert-fade"></transition>

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');  } }};

import Alert from './Alert.vue'Alert.install = function(Vue){  Vue.component('Alert', Alert);}export default Alert

<Alert :closable="false"> 这是一个不能关闭的alert</Alert><Alert> 这是一个可以关闭的alert</Alert>