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">&#xe609;</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
Alert

基于Vuejs的搜索匹配功能实现方法
下面小编就为大家分享一篇基于Vuejs的搜索匹配功能实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
详解.vue文件解析的实现
这篇文章主要介绍了详解.vue文件解析的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-06-06
vue+threejs写物体动画之物体缩放动画效果
最近在vue中安装Three.js,无聊顺便研究一些关于3D图形化库,下面这篇文章主要给大家介绍了关于vue+threejs写物体动画之物体缩放动画效果的相关资料,需要的朋友可以参考下
2022-10-10
解决vue页面刷新vuex中state数据丢失的问题
这篇文章介绍了解决vue页面刷新vuex中state数据丢失的问题，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-01-01
解决vue自定义全局消息框组件问题
这篇文章主要介绍了vue自定义全局消息框组件问题及解决方法，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-11-11
Ant Design Vue Table组件合并单元格方式
这篇文章主要介绍了Ant Design Vue Table组件合并单元格方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
vue如何关闭eslint检测(多种方法)
我们在开发vue项目的时候，创建的时候可能会不小心选择了eslint，所以如果不想让eslint检测，我们该怎么办呢，本文就详细的介绍了几种关闭方法，感兴趣的可以了解一下
2021-12-12
vue项目实现分页效果
这篇文章主要为大家详细介绍了vue项目实现分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-03-03
关于Vue Webpack2单元测试示例详解
这篇文章主要给大家介绍了关于Vue Webpack2单元测试的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。
2017-08-08
Vue.js基础之监听子组件事件v-on及绑定数据v-model学习
这篇文章主要为大家介绍了Vue.js基础之监听子组件事件v-on及绑定数据v-model学习，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-06-06