用Vue.extend构建消息提示组件的方法实例


Posted in Javascript onAugust 08, 2017

前提

前段时间自己做的vue练手项目,需要一个通用的消息提示组件,但是消息提示这种组件我更想用方法来调用,而不是在各个页面上都添加个组件(那样感觉很麻烦,重度懒癌患者),于是就上网差查了查,并研究了ElementUI的message源码。自己弄出来一个简陋的消息提示组件

Vue.extend是什么

用Vue.extend构建消息提示组件的方法实例

按照官方文档说法,他是一个类构造器,用来创建一个子类vue并返回构造函数,而Vue.component它的任务是将给定的构造函数与字符串ID相关联,以便Vue.js可以在模板中接收它。
了解了这点之后我们开始做我们的消息提示组件吧。

消息提示组件

首先我们先创建我们的提示组件的模板

<template>
  <transition name="message-fade">
    <div class="message" v-show="show">
    <span class="icon"><icon name="info"></icon></span>
      <p>{{message}}</p>
    </div>
  </transition>
</template>

<script>
  export default {
    name: 'v-message',
    mounted(){
      this.StartTime();
    },
    data(){
      return {
        message: '123',
        show: false,
        timer: null
      }
    },
    methods:{
      StartTime(){
        this.show = true;
        if(this.timer){
          clearTimeOut(this.timer)
        }else{
          this.timer = setTimeout(()=>{
            this.show = false
          }, 3000);
        }
      }
    }
  }
</script>

之后我们需要用将message.vue传到Vue.extend()里

import Vue from 'vue';
let MessageBox = Vue.extend(require('./message.vue'));
let instance;
var message = function(options){
  if(typeof options === 'string'){
    options = {
      message: options
    }
  }
  //生成组件
  instance = new MessageBox({
    data: options
  })
  //组件需要挂载在dom元素上
  instance.vm = instance.$mount();
  //根据不同的类型,设置不同消息的背景颜色
  if(options.type){
    instance.vm.$el.children[0].className += ` icon__${options.type}`;
  }
  document.body.appendChild(instance.vm.$el);
  return instance.vm;
}

const type = ['success', 'info', 'warning', 'error'];
type.forEach((type)=>{
  message[type] = options =>{
    if(typeof options === 'string'){
      options = {
        message: options
      }
    }
    options.type = type;
    return message(options);
  }
})

export default message;

之后用挂在全局方法上,之后用this.$message()方法调用

vue.prototype.$message = message;

最后的效果图

用Vue.extend构建消息提示组件的方法实例

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

Javascript 相关文章推荐
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
JavaScript实现函数返回多个值的方法
Jun 09 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
Jul 27 Javascript
微信小程序使用template标签实现五星评分功能
Nov 03 Javascript
微信小程序用canvas画图并分享
Mar 09 Javascript
基于canvas实现手写签名(vue)
May 21 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
JS判断数组四种实现方法详解
Jun 29 Javascript
node.js如何根据URL返回指定的图片详解
Oct 21 Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 #Javascript
VUE实现表单元素双向绑定(总结)
Aug 08 #Javascript
ES6模块化的import和export用法方法总结
Aug 08 #Javascript
Vue项目中quill-editor带样式编辑器的使用方法
Aug 08 #Javascript
webpack 2.x配置reactjs基本开发环境详解
Aug 08 #Javascript
vue-quill-editor实现图片上传功能
Aug 08 #Javascript
vue.js评论发布信息可插入QQ表情功能
Aug 08 #Javascript
You might like
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
php下通过伪造http头破解防盗链的代码
2010/07/03 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
php基于单例模式封装mysql类完整实例
2016/10/18 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
Yii2语言国际化自动配置详解
2018/08/22 PHP
JavaScript中函数声明优先于变量声明的实例分析
2012/03/01 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
js实现导航吸顶效果
2017/02/24 Javascript
jQuery实现手势解锁密码特效
2017/08/14 jQuery
详解webpack babel的配置
2018/01/09 Javascript
vue中element组件样式修改无效的解决方法
2018/02/03 Javascript
JavaScript求一组数的最小公倍数和最大公约数常用算法详解【面向对象,回归迭代和循环】
2018/05/07 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
如何用JavaScript实现功能齐全的单链表详解
2019/02/11 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
微信小程序的引导页实现代码
2020/06/24 Javascript
vue实现动态给id赋值,点击事件获取当前点击的元素的id操作
2020/11/09 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
使用python解析xml成对应的html示例分享
2014/04/02 Python
Python实现爬虫设置代理IP和伪装成浏览器的方法分享
2018/05/07 Python
Python定义二叉树及4种遍历方法实例详解
2018/07/05 Python
python按照多个条件排序的方法
2019/02/08 Python
python async with和async for的使用
2019/06/20 Python
python 有效的括号的实现代码示例
2019/11/11 Python
Python实现分数序列求和
2020/02/25 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
购房公证委托书(2014版)
2014/09/12 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
职业生涯规划书之大学四年
2019/08/07 职场文书
一起来看看Vue的核心原理剖析
2022/03/24 Vue.js