vue组件之Alert的实现代码


Posted in Javascript onOctober 17, 2017

前言

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

Alert

vue组件之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 关闭时触发

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript中暂停功能的实现代码
Mar 04 Javascript
jQuery 自动增长的文本输入框实现代码
Apr 02 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
jquery新的绑定事件机制on方法的使用方法
Apr 15 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
vue2.0 中#$emit,$on的使用详解
Jun 07 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
Node实战之不同环境下配置文件使用教程
Jan 02 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
Node在Controller层进行数据校验的过程详解
Aug 28 Javascript
JS实现按钮添加背景音乐示例代码
Oct 17 #Javascript
vue-cli之router基本使用方法详解
Oct 17 #Javascript
教你用Cordova打包Vue项目的方法
Oct 17 #Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 #Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 #Javascript
javascript 中模板方法单例的实现方法
Oct 17 #Javascript
vue滚动轴插件better-scroll使用详解
Oct 17 #Javascript
You might like
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
淘宝ip地址查询类分享(利用淘宝ip库)
2014/01/07 PHP
php中smarty实现多模版网站的方法
2015/06/11 PHP
UPUPW 更新 64 位 Apache 系列 PHP 7.0 正式版
2015/12/08 PHP
php如何修改SESSION的生存存储时间的实例代码
2017/07/05 PHP
Laravel Validator自定义错误返回提示消息并在前端展示
2019/05/09 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
js日期时间补零的小例子
2013/03/05 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
2015/11/30 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
jQuery实现弹幕效果
2017/02/17 Javascript
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
JS代码实现页面切换效果
2021/01/10 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
爬山算法简介和Python实现实例
2014/04/26 Python
Python爬取京东的商品分类与链接
2016/08/26 Python
Python WEB应用部署的实现方法
2019/01/02 Python
Python中Numpy ndarray的使用详解
2019/05/24 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
Python实现直方图均衡基本原理解析
2019/08/08 Python
详解Python time库的使用
2019/10/10 Python
Python 简单计算要求形状面积的实例
2020/01/18 Python
keras 多gpu并行运行案例
2020/06/10 Python
日本无添加化妆品:HABA
2016/08/18 全球购物
MAC彩妆英国官网:M·A·C UK
2018/05/30 全球购物
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
音乐器材管理制度
2014/01/31 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
军训心得体会范文(2016最新篇)
2016/01/11 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
浅谈MySQL中的六种日志
2022/03/23 MySQL