消息弹框组件,默认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 自定义全局消息框组件的更多相关文章

  1. 一个vue的全局提示框组件

    <template> <!-- 全局提示框 --> <div v-show="visible" class="dialog-tips dia ...

  2. vue自定义下拉框组件

    创建下拉框组件 Select.vue <template> <div class="selects"> <div :class="{sele ...

  3. vue 自定义modal 模态框组件

    参数名 类型 说明 visible Boolean 是否显示,默认false title String 标题 update:visible Boolean 更新visible, 使用:visible. ...

  4. vue 自定义全局方法

    import {myfun} from '../static/js/test.js' //se6的正确写法export default {methods:{ diyfun:function () { ...

  5. Combo( 自定义下拉框) 组件

    本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方法,这个组件依赖于ValidateBox(验证框)组件 一. 加载方式自定义下拉框不能通过标签的方式进行创建.<input ...

  6. 第二百一十二节,jQuery EasyUI,Combo(自定义下拉框)组件

    jQuery EasyUI,Combo(自定义下拉框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Combo(自定义下拉框)组件的使用方 ...

  7. vue自定义全局和局部指令

    一.介绍 1.除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令. 2.自定义指令的分类       1.全局指令 2.局部指令 3.自定义全局指令格式 V ...

  8. 使用Vue自定义指令实现Select组件

    完成的效果图如下: 一.首先,我们简单布局一下: <template> <div class="select"> <div class="i ...

  9. Vue自定义全局Toast和Loading

    如果我们的Vue项目中没有用到任何UI框架的话,为了更好的用户体验,肯定会用到loading和toast.那么我们就自定义这两个组件吧. 1.Toast组件 首先,在common下新建global文件 ...

随机推荐

  1. javaScript call与apply学习笔记

    call和apply是借用他人的函数实现自己到功能,具体表现在改变this指向,借用他人方法 而不同的地方是call是把实参按照形参的个数传入,而apply传入的是一个数组(argument) 写一个 ...

  2. Inception V3 的 tensorflow 实现

    tensorflow 官方给出的实现:models/inception_v3.py at master · tensorflow/models · GitHub 1. 模型结构 首先来看 Incept ...

  3. POJ 1989 贪心

    题意: 思路: 从前到后扫一遍 如果k个数都出现过了 ans++ 从当前接着判断 最后答案就是ans+1 //By SiriusRen #include <cstdio> using na ...

  4. POJ 2227 FloodFill (priority_queue)

    题意: 思路: 搞一个priority_queue 先把边界加进去 不断取最小的 向中间扩散 //By SiriusRen #include <queue> #include <cs ...

  5. JQ 实施编辑 (clone()复制行||双击编辑)

    //代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  6. 从excel 获取内容 模块:xlrd

    import xlrd # 获取表的对象 excel = xlrd.open_workbook(‘a.excel’) # 获取所有excel里的所有表 table_list = excel.sheet ...

  7. 解决Docker容器内访问宿主机MySQL数据库服务器的问题

    懒得描述太多,总归是解决了问题,方法简要记录如下,虽然简要,但是完整,一来纪念处理该问题耗费的大半天时间,二来本着共享精神帮助其他遇到该问题的哥们儿,当然这个方法并不一定能解决你们的问题,但是多少能提 ...

  8. 调用WCF出现的异常

    使用如下代码调用调用远程服务时,                   try                    {                        using (GetSimServ ...

  9. 【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)) 然后其他 ...

  10. [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 ...