<强>前提
前段时间自己做的vue练手项目,需要一个通用的消息提示组件,但是消息提示这种组件我更想用方法来调用,而不是在各个页面上都添加个组件(那样感觉很麻烦,重度懒癌患者),于是就上网差查了查,并研究了ElementUI的消息源码。自己弄出来一个简陋的消息提示组件
<强> Vue.extend是什么
按照官方文档说法,他是一个类构造器,用来创建一个子类vue并返回构造函数,而Vue.component它的任务是将给定的构造函数与字符串ID相关联,以便Vue.js可以在模板中接收它。
了解了这点之后我们开始做我们的消息提示组件吧。
<>强消息提示组件
首先我们先创建我们的提示组件的模板
& lt; template>
& lt;过渡name=" message-fade比;
& lt; div类="消息" v-show=靶恪北?
& lt;跨类="偶像"祝辞& lt;图标name="信息"祝辞& lt;/icon> & lt;/span>
& lt; p>{{消息}}& lt;/p>
& lt;/div>
& lt;/transition>
& lt;/template>
& lt; script>
出口默认{
名称:“v-message”,
安装(){
this.StartTime ();
}，
数据(){
返回{
信息:“123”,
显示:假的,
计时器:零
}
}，
方法:{
开始时间(){
这一点。显示=true;
如果(this.timer) {
clearTimeOut (this.timer)
其他}{
这一点。计时器=setTimeout()=祝辞{
这一点。显示=false
}, 3000);
}
}
}
}
& lt;/script>
之前
之后我们需要用将message.vue传到Vue.extend()里
从“进口Vue Vue ';
让对话框=Vue.extend(要求(’。/message.vue '));
让实例;
var消息=function(选项){
如果(typeof选项==='字符串'){
选择={
信息:选择
}
}//生成组件
实例=new对话框({
数据:选择
}）//组件需要挂载在dom元素上
实例。vm实例。美元山();//根据不同的类型,设置不同消息的背景颜色
如果(options.type) {
instance.vm。美元el.children [0]。类名+=icon__ $ {options.type} ';
}
document.body.appendChild (instance.vm。el美元);
返回instance.vm;
}
const type=[‘成功’,‘信息’,‘警告’,‘错误’);
type.forEach((类型)=祝辞{
消息[型]=选项=祝辞{
如果(typeof选项==='字符串'){
选择={
信息:选择
}
}
选项。类型=类型;
返回消息(选项);
}
}）
出口默认消息;
之前
之后用挂在全局方法上,之后用这个。美元消息()方法调用
vue.prototype。美元消息=消息;
最后的效果图
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
