Vue.extend实现组件库message组件示例详解
作者:陌年微凉_ 时间:2024-05-09 15:09:26
概述
当我们使用组件库的时候,某些组件并不是直接放到模板当中进行使用,而是通过api的方式调用生成组件并且挂在到我们的页面中,其中最常见的就是message组件,我们在组件库中看到的多数都是api调用的方式生成。记录自己基本实现message组件。
Vue.extend
在vue中,要实现通过api方式实现组件的使用,这个aip是必不可少的,因此我们先了解下这个全局api的用法,官网说的很晦涩难懂,我的理解就是通过参数传递一个配置对象(这个配置对象就是我们模板中export default的那个对象,例如data,methods,props等等)都可以传递,接下来该函数会根据我们的配置对象生成一个继承自Vue的子组件构造函数,然后我们就可以通过实例化构造函数,生成对应的组件,然后我们就可以挂载到页面了。
message 组件配置对象(就是.vue文件)
<template>
<div
:class="['message-box', 'message-box-' + type]"
:style="{ top: top + 'px' }"
>
<header>
<span class="close">X</span>
</header>
<div class="message--box-content">
{{ message }}
</div>
</div>
</template>
<script>
export default {
data() {
return {};
},
props: {
message: {
type: String,
default: "this is message box",
},
type: {
validator(value) {
return ["success", "error", "default"].indexOf(value) !== -1;
},
default: "default",
},
top: {
type: Number,
default: 20,
},
},
};
</script>
<style lang="less">
.message-box {
position: fixed;
left: 50%;
transform: translateX(-50%);
width: 400px;
height: 50px;
background-color: #ccc;
.close {
position: absolute;
top: 0;
right: 5px;
cursor: pointer;
}
.message--box-content {
line-height: 50px;
text-indent: 2em;
}
&.message-box-success {
background-color: green;
}
&.message-box-error {
background-color: red;
}
&.message-box-default {
background-color: #eee;
}
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>
message 生成组件的函数
import MessageBoxOption from "./index.vue";
import Vue from "vue";
let messageBoxConstructor = Vue.extend({
...MessageBoxOption,
});
export default {
install(Vue) {
Vue.prototype.$Message = {
instanceList: [],
hide(types) {
for (let instance of this.instanceList) {
if (instance.types == types) {
instance &&
document.body.removeChild(instance.$el) &&
Reflect.deleteProperty(this, types);
}
}
},
success(message) {
if (!this.vmSuccess) {
let messageBox = new messageBoxConstructor({
propsData: {
message,
type: "success",
top: (this.instanceList.length + 1) * 55,
},
});
let $Message = messageBox.$mount();
this.vmSuccess = $Message;
this.instanceList.push({ ...$Message, types: "vmSuccess" });
document.body.appendChild($Message.$el);
setTimeout(() => {
this.hide("vmSuccess");
}, 4000);
}
},
error(message) {
if (!this.vmError) {
let messageBox = new messageBoxConstructor({
propsData: {
message,
type: "error",
top: (this.instanceList.length + 1) * 55,
},
});
let $Message = messageBox.$mount();
this.vmError = $Message;
this.instanceList.push({ ...$Message, types: "vmError" });
document.body.appendChild($Message.$el);
setTimeout(() => {
this.hide("vmError");
}, 6000);
}
},
};
},
};
使用方法
<template>
<div id="app">
<button @click="handleShowMessageBox">显示</button>
<button @click="handleHideMessageBox">隐藏</button>
</div>
</template>
<script>
import MessageBox from "./components/MessageBox/index.vue";
export default {
name: "App",
components: { MessageBox },
methods: {
handleShowMessageBox() {
this.$Message.success("恭喜你,这是一条成功消息");
this.$Message.error("sorry,这是一条失败消息");
},
handleHideMessageBox() {
this.$Message.hide();
},
},
};
</script>
效果图
总结
要通过js的方式通过api调用生成,关键在在于Vue.extend函数的使用,上面只是个简单版本的,可以根据自己的需要,自动加以扩展。
我们这种弹窗组件一般做成单例,因此点击的时候不会重复出现相同类型的组件。
来源:https://juejin.cn/post/7086737310925979656
标签:Vue.extend,message,组件库,组件
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
使用OpenCV circle函数图像上画圆的示例代码
2021-03-12 17:30:41
MySQL中create table as 与like的区别分析
2024-01-15 08:25:17
![](https://img.aspxhome.com/file/2023/5/110315_0s.png)
face++与python实现人脸识别签到(考勤)功能
2021-10-18 09:06:06
![](https://img.aspxhome.com/file/2023/4/84044_0s.jpg)
Python编程实现生成特定范围内不重复多个随机数的2种方法
2022-05-08 08:49:51
![](https://img.aspxhome.com/file/2023/3/95333_0s.jpg)
python二分法查找算法实现方法【递归与非递归】
2023-04-17 08:13:47
Python中使用MELIAE分析程序内存占用实例
2021-10-26 22:34:24
在Oracle中向视图中插入数据的方法
2009-02-28 10:42:00
MySQL如何优化查询速度
2024-01-17 05:38:04
如何列出我所需要数据视图?
2010-01-12 20:00:00
解决tensorflow测试模型时NotFoundError错误的问题
2021-08-02 09:33:56
Python多线程爬取豆瓣影评API接口
2023-07-28 05:33:48
纯CSS制作的网页中的lightbox效果
2007-11-06 18:59:00
Spring+Mybatis+Mysql搭建分布式数据库访问框架的方法
2024-01-19 07:46:18
![](https://img.aspxhome.com/file/2023/7/77367_0s.png)
python使用多进程的实例详解
2021-09-03 19:19:44
让插入到 innerHTML 中的 javascript 跑起来
2008-07-01 13:14:00
PHP常用函数之获取汉字首字母功能示例
2023-06-16 12:24:39
python爬虫实例之获取动漫截图
2023-08-17 22:13:57
![](https://img.aspxhome.com/file/2023/8/90878_0s.jpg)
基于python内置函数与匿名函数详解
2021-02-02 08:27:26
![](https://img.aspxhome.com/file/2023/5/133585_0s.png)
脆弱的用户体验
2010-01-28 12:34:00
Python在字典中查找元素的3种方式
2023-08-07 21:33:35