用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 动态扩展对象之另类视角
May 25 Javascript
JQuery文本框高亮显示插件代码
Apr 02 Javascript
jquery ajax return没有返回值的解决方法
Oct 20 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Jan 21 Javascript
ExtJS的拖拽效果示例
Dec 09 Javascript
2014 年最热门的21款JavaScript框架推荐
Dec 25 Javascript
jquery实现左右滑动式轮播图
Mar 02 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
Apr 14 Javascript
vue实现把接口单独存放在一个文件方式
Aug 13 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文件缓存类用法实例分析
2015/04/22 PHP
CI框架中redis缓存相关操作文件示例代码
2016/05/17 PHP
php使用PDO从数据库表中读取数据的实现方法(必看)
2017/06/02 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
利用WebBrowser彻底解决Web打印问题(包括后台打印)
2009/06/22 Javascript
range 标准化之获取
2011/08/28 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
2013/04/22 Javascript
JS获取select的value和text值的简单实例
2014/02/26 Javascript
node中socket.io的事件使用详解
2014/12/15 Javascript
简单介绍JavaScript的变量和数据类型
2015/06/03 Javascript
javascript实现网站加入收藏功能
2015/12/16 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
node.js开发辅助工具nodemon安装与配置详解
2020/02/06 Javascript
详解JavaScript 的执行机制
2020/09/18 Javascript
Jquery Fade用法详解
2020/11/06 jQuery
[53:43]VP vs NewBee Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
[07:20]2018DOTA2国际邀请赛寻真——逐梦Mineski
2018/08/10 DOTA
python 正则表达式 概述及常用字符
2009/05/04 Python
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
Pycharm学习教程(4) Python解释器的相关配置
2017/05/03 Python
Python实现Smtplib发送带有各种附件的邮件实例
2017/06/05 Python
Django rest framework工具包简单用法示例
2018/07/20 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
Python包和模块的分发详细介绍
2020/06/19 Python
AmazeUI中各种的导航式菜单与解决方法
2020/08/19 HTML / CSS
函授教育个人学习的自我评价
2013/12/31 职场文书
党员党性分析材料
2014/02/17 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
体育系毕业生求职自荐信
2014/04/16 职场文书
2014和解协议书范文
2014/09/15 职场文书
交通事故调解协议书
2015/05/20 职场文书
社区安全温馨提示语
2015/07/14 职场文书
小学感恩主题班会
2015/08/12 职场文书
Go语言操作数据库及其常规操作的示例代码
2021/04/21 Golang