前提
前段时间自己做的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;
最后的效果图
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“用Vue.extend构建消息提示组件的方法实例”评论...
P70系列延期，华为新旗舰将在下月发布
3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。
而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。