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 版本自动生成文章摘要
Jul 23 Javascript
js清除input中type等于file的值域(示例代码)
Dec 24 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
json传值以及ajax接收详解
May 24 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
vuejs点击class变化的实例
Sep 05 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 Javascript
基于ajax实现上传图片代码示例解析
Dec 03 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
《斗罗大陆》六翼天使武魂最强,为什么老千家不是上三宗?
2020/03/02 国漫
php学习笔记 数组遍历实现代码
2011/06/09 PHP
php object转数组示例
2014/01/15 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
php实现断点续传大文件示例代码
2020/06/19 PHP
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
屏蔽相应键盘按钮操作
2014/03/10 Javascript
node.js中的fs.closeSync方法使用说明
2014/12/17 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
nodejs实现爬取网站图片功能
2017/12/14 NodeJs
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
vue.js实现h5机器人聊天(测试版)
2020/07/16 Javascript
js闭包的9个使用场景
2020/12/29 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
python itchat实现微信自动回复的示例代码
2017/08/14 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
Python关于excel和shp的使用在matplotlib
2019/01/03 Python
Python+OpenCV采集本地摄像头的视频
2019/04/25 Python
Python 3.10 的首个 PEP 诞生,内置类型 zip() 迎来新特性(推荐)
2020/07/03 Python
jupyter 添加不同内核的操作
2021/02/06 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
泰国在线书店:SE-ED
2020/06/21 全球购物
编写一子程序,将一链表倒序,即使链表表尾变表头,表头变表尾
2016/02/10 面试题
九州传奇上机题
2014/07/10 面试题
护理专业毕业生自我鉴定
2013/10/08 职场文书
广告设计专业自荐信范文
2013/11/14 职场文书
毕业生就业自荐书
2013/12/15 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
大学中国梦演讲稿
2014/04/23 职场文书
公司出差管理制度范本
2015/08/05 职场文书
深入浅析python3 依赖倒置原则(示例代码)
2021/07/09 Python