基于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 自制滚动条的小例子
Mar 16 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
关于使用js算总价的问题
Jun 23 Javascript
JS动态添加的div点击跳转到另一页面实现代码
Sep 30 Javascript
mongoose更新对象的两种方法示例比较
Dec 19 Javascript
Angular4学习教程之DOM属性绑定详解
Jan 04 Javascript
利用adb shell和node.js实现抖音自动抢红包功能(推荐)
Feb 22 Javascript
JS随机数产生代码分享
Feb 24 Javascript
node.js遍历目录的方法示例
Aug 01 Javascript
Vue学习之axios的使用方法实例分析
Jan 06 Javascript
深入理解Antd-Select组件的用法
Feb 25 Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 05 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实现用户注册登录功能
2016/10/14 PHP
javascript引导程序
2008/10/26 Javascript
javascript function调用时的参数检测常用办法
2010/02/26 Javascript
google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)
2011/04/24 Javascript
js+CSS实现弹出居中背景半透明div层的方法
2015/02/26 Javascript
详解javascript的变量与标识符
2016/01/04 Javascript
浅谈javascript基础之客户端事件驱动
2016/06/10 Javascript
基于jQuery实现一个marquee无缝滚动的插件
2017/03/09 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
[54:53]完美世界DOTA2联赛PWL S2 GXR vs PXG 第二场 11.18
2020/11/18 DOTA
Python使用MYSQLDB实现从数据库中导出XML文件的方法
2015/05/11 Python
Python编程入门之Hello World的三种实现方式
2015/11/13 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
python 命令行传入参数实现解析
2019/08/30 Python
springboot配置文件抽离 git管理统 配置中心详解
2019/09/02 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
Python大数据之从网页上爬取数据的方法详解
2019/11/16 Python
对Matlab中共轭、转置和共轭装置的区别说明
2020/05/11 Python
python温度转换华氏温度实现代码
2020/12/06 Python
CSS3中31种选择器使用方法教程
2013/12/05 HTML / CSS
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
俄罗斯香水在线商店:AromaCode
2019/12/04 全球购物
波兰汽车配件网上商店:iParts.pl
2020/09/08 全球购物
应用数学自荐书范文
2013/11/24 职场文书
半年思想汇报
2013/12/30 职场文书
安全生产检查通报
2014/01/29 职场文书
临床医学专业求职信
2014/08/08 职场文书
租房协议书范例
2014/10/14 职场文书
武侯祠导游词
2015/02/04 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
Python合并多张图片成PDF
2021/06/09 Python
Spring Boot 底层原理基础深度解析
2022/04/03 Java/Android