用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 相关文章推荐
写的htc的数据表格
Jan 20 Javascript
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
JQuery实现的在新窗口打开链接的方法小结
Apr 22 Javascript
js Function类型
Dec 04 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
javascript阻止事件冒泡和浏览器的默认行为
Jan 21 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
node中的密码安全(加密)
Sep 17 Javascript
JS实现二维数组元素的排列组合运算简单示例
Jan 28 Javascript
JavaScript ES2019中的8个新特性详解
Feb 20 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下使用iconv需要注意的问题
2010/11/20 PHP
php基于base64解码图片与加密图片还原实例
2014/11/03 PHP
php实现统计目录文件大小的函数
2015/12/25 PHP
php7 安装yar 生成docker镜像
2017/05/09 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
2014/04/08 Javascript
window.open()详解及浏览器兼容性问题示例探讨
2014/05/29 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
2016/04/26 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
Bootstrap 模态框(Modal)插件代码解析
2016/12/21 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
vue实现的上拉加载更多数据/分页功能示例
2019/05/25 Javascript
解决vue中的无限循环问题
2020/07/27 Javascript
在Python程序员面试中被问的最多的10道题
2017/12/05 Python
python DataFrame获取行数、列数、索引及第几行第几列的值方法
2018/04/08 Python
Python爬虫之UserAgent的使用实例
2019/02/21 Python
django多个APP的urls设置方法(views重复问题解决)
2019/07/19 Python
Python 列表去重去除空字符的例子
2019/07/20 Python
python根据文本生成词云图代码实例
2019/11/15 Python
PyTorch如何搭建一个简单的网络
2020/08/24 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
墨西哥运动服饰和鞋网上商店:Netshoes墨西哥
2016/07/28 全球购物
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
护士自我鉴定总结
2014/03/24 职场文书
法人委托书范本
2014/04/04 职场文书
党员民主评议自我评价
2014/10/20 职场文书
后进生评语大全
2015/01/04 职场文书
放弃继承权公证书
2015/01/23 职场文书
承兑汇票延期证明
2015/06/23 职场文书
校运会新闻稿
2015/07/17 职场文书