用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 json 实例代码
Dec 02 Javascript
JS代码放在head和body中的区别分析
Dec 01 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
May 05 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
vue 本地环境跨域请求proxyTable的方法
Sep 19 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 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
日本十大最佳动漫,全都是二次元的神级作品
2019/10/05 日漫
当年上海收录机产品生产,进口和价格情况
2021/03/04 无线电
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
PHP中使用GD库创建圆形饼图的例子
2014/11/19 PHP
PHP微信API接口类
2016/08/22 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
jQuery1.6 正式版发布并提供下载
2011/05/05 Javascript
Jquery设置attr的disabled属性控制某行显示或者隐藏
2014/09/25 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
2015/12/31 Javascript
javascript跨域请求包装函数与用法示例
2016/11/03 Javascript
Vue.js路由组件vue-router使用方法详解
2016/12/02 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
js定时器+简单的动画效果实例
2017/11/10 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
基于vue实现web端超大数据量表格的卡顿解决
2019/04/02 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
2020/05/28 Javascript
JavaScript实现沿五角星形线摆动的小圆实例详解
2020/07/28 Javascript
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
python爬虫基本知识
2018/03/05 Python
Jupyter安装nbextensions,启动提示没有nbextensions库
2020/04/23 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
如何使用python写截屏小工具
2020/09/29 Python
说一下Linux下有关用户和组管理的命令
2014/08/18 面试题
留学自荐信的技巧
2013/10/17 职场文书
卫生安全检查制度
2014/02/04 职场文书
校园安全教育广播稿
2014/02/17 职场文书
应届毕业生自荐信
2014/05/28 职场文书
毕业生评语大全
2015/01/04 职场文书
Pandas-DataFrame知识点汇总
2022/03/16 Python