用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 相关文章推荐
Javascript this 的一些学习总结
Aug 02 Javascript
使用JQ来编写最基本的淡入淡出效果附演示动画
Oct 31 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
JS将滑动门改为选项卡(需鼠标点击)的实现方法
Sep 27 Javascript
jquery实现简洁文件上传表单样式
Nov 02 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
jQuery插件FusionWidgets实现的Cylinder图效果示例【附demo源码】
Mar 23 jQuery
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
通过vue手动封装on、emit、off的代码详解
May 29 Javascript
基于react项目打包css引用路径错误解决方案
Oct 28 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
第二节 对象模型 [2]
2006/10/09 PHP
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
PHP时间格式控制符对照表分享
2013/07/23 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
JQuery Tips(3) 关于$()包装集内元素的改变
2009/12/14 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
让mayfish支持mysqli数据库驱动的实现方法
2010/05/22 Javascript
js 事件处理函数间的Event物件是否全等
2011/04/08 Javascript
jquery.artwl.thickbox.js  一个非常简单好用的jQuery弹出层插件
2012/03/01 Javascript
Javascript中Event属性搜集整理
2013/09/17 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
domReady的实现案例
2016/11/23 Javascript
JS中绑定事件顺序(事件冒泡与事件捕获区别)
2017/01/24 Javascript
用js将long型数据转换成date型或datetime型的实例
2017/07/03 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
2018/04/28 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
vue-cli的build的文件夹下没有dev-server.js文件配置mock数据的方法
2019/04/17 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
使用js和canvas实现时钟效果
2020/09/08 Javascript
[02:48]DOTA2英雄基础教程 拉席克
2013/12/12 DOTA
python实现批量转换文件编码(批转换编码示例)
2014/01/23 Python
python中self原理实例分析
2015/04/30 Python
各种Python库安装包下载地址与安装过程详细介绍(Windows版)
2016/11/02 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
opencv+python实现均值滤波
2020/02/19 Python
python GUI库图形界面开发之PyQt5动态加载QSS样式文件
2020/02/25 Python
css3遮罩层镂空效果的多种实现方法
2020/05/11 HTML / CSS
HTML5 虚拟键盘出现挡住输入框的解决办法
2017/02/14 HTML / CSS
教师节学生演讲稿
2014/09/03 职场文书
英文道歉信
2015/01/20 职场文书
三八妇女节寄语
2015/02/27 职场文书
python 常用的异步框架汇总整理
2021/06/18 Python