时间:2021-05-18
前提
前段时间自己做的vue练手项目,需要一个通用的消息提示组件,但是消息提示这种组件我更想用方法来调用,而不是在各个页面上都添加个组件(那样感觉很麻烦,重度懒癌患者),于是就上网差查了查,并研究了ElementUI的message源码。自己弄出来一个简陋的消息提示组件
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;最后的效果图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
创建组件的两种方法小结1.全局注册2.局部注册varchild=Vue.extend({})varparent=Vue.extend({})Vue.extend
1.使用Vue.extend创建全局的Vue组件//1.1使用vue.extend创建组件varcom1=Vue.extend({//通过template属性指
下面讲一下如何定义动态组件。Vue.extend思路就是拿到组件的构造函数,这样我们就可以new了。而Vue.extend可以做到:https://cn.vue
本文实例讲述了Vue.extend实现挂载到实例上的方法。分享给大家供大家参考,具体如下:这里主要是做个笔记根据官网的说法,Vue.extend:是使用基础Vu
Vue.extend构造器的详解1.简单介绍Vue.extend(options)参数:对象用法:使用Vue构造器,创建一个“子类”,参数是一个包含组件选项的对