用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 可以拖动的div实现代码 脚本之家修正版
Jun 26 Javascript
jquery.tmpl JQuery模板插件
Oct 10 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
纯JavaScript实现的分页插件实例
Jul 14 Javascript
AngularJS基础 ng-if 指令用法
Aug 01 Javascript
Validform表单验证总结篇
Oct 31 Javascript
angularjs使用directive实现分页组件的示例
Feb 07 Javascript
js 倒计时(高效率服务器时间同步)
Sep 12 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
axios如何利用promise无痛刷新token的实现方法
Aug 27 Javascript
vue element table中自定义一些input的验证操作
Jul 18 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
php读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
php intval函数用法总结
2019/04/14 PHP
jquery实现图片左右间隔滚动特效(可自动播放)
2013/05/08 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
js图片闪动特效可以控制间隔时间如几分钟闪动一下
2014/08/12 Javascript
浅谈JavaScript中的Math.atan()方法的使用
2015/06/14 Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
2015/08/24 Javascript
jQuery实现验证码功能
2017/03/17 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
2019/12/29 Javascript
ssm+vue前后端分离框架整合实现(附源码)
2020/07/08 Javascript
在Python的struct模块中进行数据格式转换的方法
2015/06/17 Python
初步认识Python中的列表与位运算符
2015/10/12 Python
Python之str操作方法(详解)
2017/06/19 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
基于python二叉树的构造和打印例子
2019/08/09 Python
PyTorch中Tensor的拼接与拆分的实现
2019/08/18 Python
Python3.7 读取音频根据文件名生成脚本的代码
2020/04/07 Python
浅析HTML5页面元素及属性
2021/01/20 HTML / CSS
毕业生怎样写好自荐信
2013/11/11 职场文书
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
工作时间上网检讨书
2014/02/03 职场文书
物业总经理岗位职责
2014/02/28 职场文书
销售顾问工作计划书
2014/09/15 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
简单介绍Python的第三方库yaml
2021/06/18 Python
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS
mysql 索引合并的使用
2021/08/30 MySQL
Python 多线程处理任务实例
2021/11/07 Python