vue组件之Alert的实现代码

vue组件之Alert的实现代码

前言

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

Alert

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

templat模板结构



大致结构 alert框，icon图标， slot插值 （其他样式颜色选项...）

如果需要动画 可以在外层包上vue内置组件transition

&lthttp://;/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

这是vEqHdtAmp一个不能关闭的alert

这是一个可以关闭的alert

Attribute

参数

说明

类型

可选值

默认值

closable

是否可关闭

boolean

vEqHdtAmp —

true

show

是否显示

boolean

—

true

Event

事件名称

说明

回调参数

update:show

关闭时触发，是否显示false

false

close

关闭时触发

—

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。