基于vue写一个全局Message组件的实现


Posted in Javascript onAugust 15, 2019

不知道大家在用一些UI框架,比如Element-ui的时候,有没有觉得一些全局组件。this.$message(),this.Toast()等,用起来很爽。他们不像其他的组件,需要去导入,去注册。麻烦的很。

看了Element的源码,自己也撸了一个。其中包括了以前没有接触过的插件知识,哎,感觉自己对Vue的理解还是不够,只停留在了使用的这阶段。需要更多的往深层次的地方去钻。不说废话了,直接上代码。

效果演示

基于vue写一个全局Message组件的实现

全局组件需要一个index.js文件去注册

基于vue写一个全局Message组件的实现

BlogMessage.vue

这里的script是用ts写的。大家只需将这里稍做修改就可以了

<template>
 <transition name="slide">
  <div class="message-wrap" :class="type" v-if="visible">
   <div class="content">{{content}}</div>
  </div>
 </transition>
</template>
<script lang='ts'>
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
@Component({
 components: {}
})
export default class extends Vue {
 private content: string = "";
 private visible: boolean = false;
 private type: string = "info"; // 'success','error'
 private startTimer() {
  window.setTimeout(() => {
   this.visible = false;
  }, 3000);
 }
 private mounted() {
  this.startTimer();
 }
}
</script>
<style scoped lang="scss">
.message-wrap {
 position: fixed;
 background-color: #44b0f3;
 color: #ffffff;
 left: 40%;
 width: 20%;
 top: 25px;
 height: 40px;
 z-index: 1001;
 border-radius: 4px;
 text-align: center;
 border: 1px solid #ebeef5;
 .content {
  line-height: 40px;
 }
}
.error {
 background-color: #fef0f0;
 color: #f56c6c;
}
.success {
 background-color: #f0f9eb;
 color: #67c23a;
}
.slide-enter-active,
.slide-leave-active {
 transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
 transition: all 0.2s ease;
}
.slide-enter,
.slide-leave-to {
 transform: translateY(-20px);
 opacity: 0;
}
</style>

index.js

import Vue from 'vue'
import BlogMessage from './BlogMessage.vue'
const MessageBox = Vue.extend(BlogMessage) // 创建的是一个组件构造器,不是实例
const Message = {
 install: (options, type, duration) => {
  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) // 添加dom元素
  Vue.nextTick(() => { // dom元素渲染完成后执行回调
   instance.visible = true
  })
 }
}
Vue.prototype.$message = Message.install;
['success', 'error'].forEach(type => {
 Vue.prototype.$message[type] = (content) => {
  return Vue.prototype.$message(content, type)
 }
})
export default Message

使用组件

1.全局注册

import Vue from 'vue';
import Message from '@/components/common/message';
Vue.use(Message);

2.调用方法

private test1() {
  this.$message("这是一条普通消息");
 }
 private test2() {
  this.$message.success("这是一条成功消息");
  // this.$message("这是一条成功消息", "success");
 }
 private test3() {
  this.$message.error("这是一条失败消息");
  // this.$message("这是一条失败消息", "error");
 }

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

Javascript 相关文章推荐
js 小数取整的函数
May 10 Javascript
加载 Javascript 最佳实践
Oct 30 Javascript
JavaScript加强之自定义callback示例
Sep 21 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
Aug 07 Javascript
js实现n秒倒计时后才可以点击的效果
Dec 20 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
JavaScript运行原理分析
Feb 09 Javascript
vue2.0 computed 计算list循环后累加值的实例
Mar 07 Javascript
详解extract-text-webpack-plugin 的使用及安装
Jun 12 Javascript
基于mpvue小程序使用echarts画折线图的方法示例
Apr 24 Javascript
vue监听用户输入和点击功能
Sep 27 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 #Javascript
解决vuex刷新状态初始化的方法实现
Aug 15 #Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 #Javascript
koa2+vue实现登陆及登录状态判断
Aug 15 #Javascript
原生js实现的移动端可拖动进度条插件功能详解
Aug 15 #Javascript
快速对接payjq的个人微信支付接口过程解析
Aug 15 #Javascript
Element-UI中关于table表格的那些骚操作(小结)
Aug 15 #Javascript
You might like
PHP安装问题
2006/10/09 PHP
PHP 导出数据到淘宝助手CSV的方法分享
2010/02/27 PHP
PHP 反向排序和随机排序代码
2010/06/30 PHP
详解php中反射的应用
2016/03/15 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
kmock javascript 单元测试代码
2011/02/06 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
时间戳转换为时间 年月日时间的JS函数
2013/08/19 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
window.location不跳转的问题解决方法
2014/04/17 Javascript
常用的Javascript数据验证插件
2015/08/04 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
2016/03/14 Javascript
headjs实现网站并行加载但顺序执行JS
2016/11/29 Javascript
JavaScript中使用webuploader实现上传视频功能(demo)
2017/04/10 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
手把手搭建安装基于windows的Vue.js运行环境
2017/06/12 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
Vue 实现CLI 3.0 + momentjs + lodash打包时优化
2019/11/13 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
Python字典中的值为列表或字典的构造实例
2019/12/16 Python
基于Python 中函数的 收集参数 机制
2019/12/21 Python
中东奢侈品市场:Coveti
2019/05/12 全球购物
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
简述你对Statement,PreparedStatement,CallableStatement的理解
2013/03/25 面试题
汽车驾驶求职信
2013/10/25 职场文书
2014年新生军训方案
2014/05/01 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书