基于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和css的jquery代码
Sep 01 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
JS实现支持Ajax验证的表单插件
Mar 24 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
Nov 03 Javascript
js倒计时显示实例
Dec 11 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 Javascript
详解js常用分割取字符串的方法
May 15 Javascript
React组件对子组件children进行加强的方法
Jun 23 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
微信小程序实现星级评价
Nov 20 Javascript
你准备好迎接vue3.0了吗
Apr 28 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三层结构(上) 简单三层结构
2010/07/04 PHP
列举PHP的Yii 2框架的开发优势
2015/07/03 PHP
PHP 使用 Imagick 裁切/生成缩略图/添加水印自动检测和处理 GIF
2016/02/19 PHP
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
js 删除数组的几种方法小结
2014/02/21 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
javascript多物体运动实现方法分析
2016/01/08 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
简单实现JavaScript图片切换效果
2016/11/28 Javascript
Bootstrap下拉菜单样式
2017/02/07 Javascript
从零开始学习Node.js系列教程一:http get和post用法分析
2017/04/13 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
Bootstrap 中data-[*] 属性的整理
2018/03/13 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
vue 实现滚动到底部翻页效果(pc端)
2019/07/31 Javascript
vue-router之解决addRoutes使用遇到的坑
2020/07/19 Javascript
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
python中使用PIL制作并验证图片验证码
2018/03/15 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
Python OpenCV调用摄像头检测人脸并截图
2020/08/20 Python
Tensorflow 实现释放内存
2020/02/03 Python
python函数enumerate,operator和Counter使用技巧实例小结
2020/02/22 Python
介绍一下Ruby中的对象,属性和方法
2012/07/11 面试题
部队党性分析材料
2014/02/16 职场文书
高校优秀辅导员事迹材料
2014/05/07 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
红白喜事主持词
2015/07/06 职场文书
python工具dtreeviz决策树可视化和模型可解释性
2022/03/03 Python
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技