vue组件之Alert的实现代码
更新时间：2017年10月17日 10:33:36 作者：答案在风中飘着
本篇文章主要介绍了vue组件之Alert的实现代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
前言
本文主要Alert 组件的大致框架， 提供少量可配置选项。 旨在大致提供思路
Alert
用于页面中展示重要的提示信息。
templat模板结构
<template> <div v-show="visible" class="Alert"> <i v-show="closable" class="iconhandle close" @click="close"></i> <slot></slot> </div> </template>
大致结构 alert框，icon图标， slot插值 （其他样式颜色选项...）
如果需要动画 可以在外层包上Vue内置组件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
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| closable | 是否可关闭 | boolean | — | true |
| show | 是否显示 | boolean | — | true |
Event
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| update:show | 关闭时触发，是否显示false | false |
| close | 关闭时触发 | — |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在本篇文章里小编给大家整理的是关于Vue+Vuex实现自动登录的知识点详解，需要的朋友们可以学习下。2020-03-03
这篇文章主要为大家详细介绍了vue+element实现动态加载表单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
本文主要介绍了Element实现复杂table表格结构的项目实践，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
在Vue中,有两种常用的CSS选择器,用于修改组件样式：scoped 和 /deep/（或 ::v-deep）,它们都是为了实现样式的作用域,本文小编就来分别给大家介绍一下这两种选择器的原理,需要的朋友可以参考下2023-08-08
Springboot+Vue-Cropper实现头像剪切上传效果
这篇文章主要为大家详细介绍了Springboot+Vue-Cropper实现头像剪切上传效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了Vuex state中同步数据和异步数据方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了vue路由跳转后刷新指定页面的方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue非父子组件通信问题及解决方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-06-06
路由跳转的同时传递参数是比较常见的,下面这篇文章主要给大家介绍了关于vue3路由配置以及路由跳转传参的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-04-04
一文了解Vue 3 的 generate 是这样生成 render&n
本文介绍generate阶段是如何根据javascript AST抽象语法树生成render函数字符串的,本文中使用的vue版本为3.4.19,感兴趣的朋友跟随小编一起看看吧2024-06-06
最新评论