脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue组件Alert

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.js中引入vuex储存接口数据及调用的详细流程

    vue.js中引入vuex储存接口数据及调用的详细流程

    这篇文章主要给大家介绍了关于在vue.js中引入vuex储存接口数据及调用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2017-12-12
  • vue中h5端打开app(判断是安卓还是苹果)

    vue中h5端打开app(判断是安卓还是苹果)

    这篇文章主要介绍了vue中h5端打开app(判断是安卓还是苹果),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • Vue实现兄弟组件间的联动效果

    Vue实现兄弟组件间的联动效果

    这篇文章主要介绍了Vue实现兄弟组件间的联动效果，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-01-01
  • vue如何判断安卓还是IOS

    vue如何判断安卓还是IOS

    这篇文章主要介绍了vue如何判断安卓还是IOS，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-04-04
  • vue性能优化之cdn引入vue-Router的问题

    vue性能优化之cdn引入vue-Router的问题

    这篇文章主要介绍了vue性能优化之cdn引入vue-Router的问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • vue自定义指令用法经典实例小结

    vue自定义指令用法经典实例小结

    这篇文章主要介绍了vue自定义指令用法,结合实例形式总结分析了vue自定义指令常见写法与相关操作注意事项,需要的朋友可以参考下
    2019-03-03
  • 安装vue无法运行、此系统无法运行脚本问题及解决

    安装vue无法运行、此系统无法运行脚本问题及解决

    这篇文章主要介绍了安装vue无法运行、此系统无法运行脚本问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue使用mui遇到的坑及解决

    vue使用mui遇到的坑及解决

    这篇文章主要介绍了vue使用mui遇到的坑及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-03-03
  • Vue自定义指令实现弹窗拖拽四边拉伸及对角线拉伸效果

    Vue自定义指令实现弹窗拖拽四边拉伸及对角线拉伸效果

    小编最近在做一个vue前端项目，需要实现弹窗的拖拽，四边拉伸及对角线拉伸，以及弹窗边界处理功能，本文通过实例代码给大家分享我的实现过程及遇到问题解决方法，感兴趣的朋友一起看看吧
    2021-08-08
  • 前端实现简单的sse封装方式(React hook Vue3)

    前端实现简单的sse封装方式(React hook Vue3)

    这篇文章主要介绍了前端实现简单的sse封装方式(React hook Vue3),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-08-08

最新评论