用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 web对话框与弹出窗口
Feb 22 Javascript
基于jquery的loading效果实现代码
Nov 05 Javascript
jquery 元素控制(追加元素/追加内容)介绍及应用
Apr 21 Javascript
jquery图片倾斜层叠切换特效代码分享
Aug 27 Javascript
JavaScript File分段上传
Mar 10 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
Sep 14 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
详解angularJS动态生成的页面中ng-click无效解决办法
Jun 19 Javascript
Vue组件化通讯的实例代码
Jun 23 Javascript
jQuery实现一个简单的验证码功能
Jun 26 jQuery
Vue配置marked链接添加target=&quot;_blank&quot;的方法
Jul 19 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
Zend公司全球首推PHP认证
2006/10/09 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
PHP开发框架laravel安装与配置教程
2015/03/13 PHP
php文件下载处理方法分析
2015/04/22 PHP
开启PHP Static 关键字之旅模式
2015/11/13 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
JS遮罩层效果 兼容ie firefox jQuery遮罩层
2010/07/26 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
jquery 设置style:display的方法
2015/01/29 Javascript
JS实现留言板功能
2017/06/17 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
vue项目中用cdn优化的方法
2018/01/03 Javascript
JavaScript检查数据中是否存在相同的元素(两种方法)
2018/10/07 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
原生JS实现记忆翻牌游戏
2020/07/31 Javascript
python发布模块的步骤分享
2014/02/21 Python
Python实现连接postgresql数据库的方法分析
2017/12/27 Python
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
TensorFlow dataset.shuffle、batch、repeat的使用详解
2020/01/21 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
纯CSS3实现的井字棋游戏
2020/11/25 HTML / CSS
Europcar德国:全球汽车租赁领域的领导者
2018/08/15 全球购物
保险专业自荐信范文
2014/02/20 职场文书
开门红主持词
2014/04/02 职场文书
捐资助学倡议书
2014/04/15 职场文书
求职信格式要求
2014/05/23 职场文书
中考标语大全
2014/06/05 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
欢迎新生标语2015
2015/07/16 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
vue实力踩坑之push当前页无效
2022/04/10 Vue.js