Vue 自定义全局消息框组件
消息弹框组件,默认3秒后自动关闭,可设置info/success/warning/error类型
效果图:
文件目录:
Message.vue
<template>
<transition name="fade">
<div class="message" :class="type" v-if="visible">
<i class="icon-type iconfont" :class="'icon-'+type"></i>
<div class="content">{{content}}
<i v-if="hasClose" class="btn-close iconfont icon-close" @click="visible=false"></i>
</div>
</div>
</transition>
</template>
<script>
export default {
name: "MyMessage",
data() {
return {
content: '',
time: 3000,
visible: false,
type:'info',//'success','warning','error'
hasClose:false,
}
},
mounted() {
this.close()
},
methods: {
close() {
window.setTimeout(() =>{
this.visible = false
}, this.time);
}
}
}
</script>
index.js
给Vue添加$my_message
方法,
判断参数,使用$mount()
给组件手动挂载参数,然后将组件插入页面中
import Vue from 'vue'
import Message from './Message.vue'
const messageBox = Vue.extend(Message)
Message.install = function (options, type) {
if (options === undefined || options === null) {
options = {
content: ''
}
} else if (typeof options === 'string' || typeof options === 'number') {
options = {
content: options
}
if (type != undefined && options != null) {
options.type = type;
}
}
let instance = new messageBox({
data: options
}).$mount()
document.body.appendChild(instance.$el)
Vue.nextTick(() => {
instance.visible = true
})
}
export default Message
在main.js里全局引入
import Message from '@/components/common/message'
Vue.prototype.$my_message = Message.install;
参数名 | 类型 | 说明 |
---|---|---|
content | String | 内容 |
time | Number | 消失时间,默认3秒后消失 |
type | String | info/success/warning/error,默认info |
hasClose | Boolean | 是否含关闭按钮,默认false |
页面中调用
//简写,第一个参数为内容,第二个为类型
this.$my_message('这是一个message');
this.$my_message('这是一个warning','warning');
//传参的方式
this.$my_message({
content:'这是一个success提示',
time:5000000,
type:'success',
hasClose:true,
});
Vue 自定义全局消息框组件的更多相关文章
- 一个vue的全局提示框组件
<template> <!-- 全局提示框 --> <div v-show="visible" class="dialog-tips dia ...
- vue自定义下拉框组件
创建下拉框组件 Select.vue <template> <div class="selects"> <div :class="{sele ...
- vue 自定义modal 模态框组件
参数名 类型 说明 visible Boolean 是否显示,默认false title String 标题 update:visible Boolean 更新visible, 使用:visible. ...
- vue 自定义全局方法
import {myfun} from '../static/js/test.js' //se6的正确写法export default {methods:{ diyfun:function () { ...
- Combo( 自定义下拉框) 组件
本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方法,这个组件依赖于ValidateBox(验证框)组件 一. 加载方式自定义下拉框不能通过标签的方式进行创建.<input ...
- 第二百一十二节,jQuery EasyUI,Combo(自定义下拉框)组件
jQuery EasyUI,Combo(自定义下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方 ...
- vue自定义全局和局部指令
一.介绍 1.除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 2.自定义指令的分类 1.全局指令 2.局部指令 3.自定义全局指令格式 V ...
- 使用Vue自定义指令实现Select组件
完成的效果图如下: 一.首先,我们简单布局一下: <template> <div class="select"> <div class="i ...
- Vue自定义全局Toast和Loading
如果我们的Vue项目中没有用到任何UI框架的话,为了更好的用户体验,肯定会用到loading和toast.那么我们就自定义这两个组件吧. 1.Toast组件 首先,在common下新建global文件 ...
随机推荐
- javaScript call与apply学习笔记
call和apply是借用他人的函数实现自己到功能,具体表现在改变this指向,借用他人方法 而不同的地方是call是把实参按照形参的个数传入,而apply传入的是一个数组(argument) 写一个 ...
- Inception V3 的 tensorflow 实现
tensorflow 官方给出的实现:models/inception_v3.py at master · tensorflow/models · GitHub 1. 模型结构 首先来看 Incept ...
- POJ 1989 贪心
题意: 思路: 从前到后扫一遍 如果k个数都出现过了 ans++ 从当前接着判断 最后答案就是ans+1 //By SiriusRen #include <cstdio> using na ...
- POJ 2227 FloodFill (priority_queue)
题意: 思路: 搞一个priority_queue 先把边界加进去 不断取最小的 向中间扩散 //By SiriusRen #include <queue> #include <cs ...
- JQ 实施编辑 (clone()复制行||双击编辑)
//代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...
- 从excel 获取内容 模块:xlrd
import xlrd # 获取表的对象 excel = xlrd.open_workbook(‘a.excel’) # 获取所有excel里的所有表 table_list = excel.sheet ...
- 解决Docker容器内访问宿主机MySQL数据库服务器的问题
懒得描述太多,总归是解决了问题,方法简要记录如下,虽然简要,但是完整,一来纪念处理该问题耗费的大半天时间,二来本着共享精神帮助其他遇到该问题的哥们儿,当然这个方法并不一定能解决你们的问题,但是多少能提 ...
- 调用WCF出现的异常
使用如下代码调用调用远程服务时, try { using (GetSimServ ...
- 【Codeforces Round #457 (Div. 2) C】Jamie and Interesting Graph
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 找比n-1大的最小的素数x 1-2,2-3..(n-2)-(n-1)长度都为1 然后(n-1)-n长度为(x-(n-2)) 然后其他 ...
- [Unit testing] data-test attr FTW
Most of time, we get used to use class name as a selector in the test. But one problem for this is c ...