用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 window.document的属性、方法和事件小结
Oct 24 Javascript
Javascript中的回调函数和匿名函数的回调示例介绍
May 12 Javascript
javascript表单验证大全
Aug 12 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
Apr 01 Javascript
JavaScript编写Chrome扩展实现与浏览器的交互及时间通知
May 16 Javascript
Javascript对象字面量的理解
Jun 22 Javascript
用director.js实现前端路由使用实例
Jan 27 Javascript
超全面的vue.js使用总结
Feb 12 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
Feb 14 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
Apr 04 Javascript
vue简单封装axios插件和接口的统一管理操作示例
Feb 02 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程序的方法
2009/03/09 PHP
浅析使用Turck-mmcache编译来加速、优化PHP代码
2013/06/20 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
PHP回溯法解决0-1背包问题实例分析
2015/03/23 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
php实现微信企业号支付个人的方法详解
2017/07/26 PHP
jquery 最简单易用的表单验证插件
2010/02/27 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
javascript计时器详解
2015/02/28 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
详解vue之页面缓存问题(基于2.0)
2017/01/10 Javascript
JavaScript的六种继承方式(推荐)
2017/06/26 Javascript
vue.js国际化 vue-i18n插件的使用详解
2017/07/07 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
vue-cli3项目展示本地Markdown文件的方法
2019/06/07 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
微信小程序indexOf的替换方法(推荐)
2020/01/14 Javascript
javascript 内存模型实例详解
2020/04/18 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
在MAC上搭建python数据分析开发环境
2016/01/26 Python
Selenium鼠标与键盘事件常用操作方法示例
2018/08/13 Python
python实现websocket的客户端压力测试
2019/06/25 Python
Python列表与元组的异同详解
2019/07/02 Python
Python如何省略括号方法详解
2020/03/21 Python
Stefania Mode美国:奢华设计师和时尚服装
2018/01/07 全球购物
《自选商场》教学反思
2014/02/14 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
导游词开场白
2015/01/31 职场文书
缅怀先烈主题班会
2015/08/14 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
PHP控制循环操作的时间
2021/04/01 PHP