组件与插件的区别
组件: 对某功能或某模块的封装(例如 我们写的弹窗,loading)
插件: 对一系列组件的封装(例如 vuex,vue-router)
关系: 插件可以封装组件,组件暴露数据给插件
插件的优点
1.开箱即用
2.功能比组件更强大,更丰富
3.一次引入,终生收益
4.打包带走,随走随用
5.可以上传到npm官网装X(面试加分项)
如何制作一个插件
第一步 先封装一个组件(toast.vue)
因为插件是基于组件的,所以得先有一个组件
我们模仿一个element ui的简单组件(弹窗提示)
在src下面新建一个plugin的文件夹,文件夹内新建一个toast.vue的组件
<template>
<div>
<div class="toast" ref='toastPosition' :class="{active: toastHidden}">
<div class="toast-warpper">
{{text}}
</div>
</div>
</div>
</template>
<script>
export default {
**// 需要注意的是 这个组件一定要有一个name,我们使用的时候直接调取name**
name: 'test-toast',
data () {
return {
text: '',
toastHidden: false
}
},
created () {
// this.toastPlugin()
},
components: {
},
methods: {
**// 定义一个操作它的方法 打开和关闭**
toastPlugin (msg, time) {
this.text = msg
this.toastHidden = true
//如果用户传了时间 就使用用户传过来的时间
if(time){
setTimeout(() => {
this.toastHidden = false
}, time)
}else{
//否则使用插件定义好的默认时间 这里设计2s后自动关闭
setTimeout(() => {
this.toastHidden = false
}, 2000)
}
}
}
}
</script>
<style>
.toast {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 0px;
min-height: 0px;
text-align: center;
background: rgba(0, 0, 0, 0.5);
border-radius: 5px;
color: #fff;
transition: all 0.5s;
z-index: -1;
opacity: 0;
}
.toast.active {
width: 150px;
min-height: 25px;
opacity: 1;
z-index: 11;
}
</style>
第二步 新建一个插件的入口文件 (test.js)
let test = {}
test.install = function (Vue, options) {
// install的第一个参数Vue表示的是Vue的实例(Vue对象),
// 第二个参数表示的是一些设置选项。
//在这里我们也可以定义一些全局的属性和方法
Vue.prototype.$msg = 'Hello I am test.js'
Vue.prototype.$myMethod = ()=> {
//do something
}
**// 把这个组件挂到全局**
Vue.component(testToast.name, testToast) // testPanel.name 组件的name属性
}
// 暴露这个入口文件 否则其它页面调取不了
export default test
第三步 在main.js里面全局引入
//把我们写好的组件引入进来
import testToast from './toast.vue'
//全局注册组件
Vue.use(testToast);
这样全局都可以使用了,而不是哪个页面使用都需要import引入。
第四步 使用我们的插件
在任何一个页面,直接调用就好了
//这个就是我们刚刚在组件里定义的name
<test-toast ref="toast"></test-toast>
//也可以调取插件里定义的方法
this.$nextTick(()=>{
//调用插件定义全局的方法
this.$myMethod();
//调用插件定义全局的属性
console.log(this.$msg);
//调用插件的方法 打开弹窗提示
//如果传了5000,则该插件5s后关闭,否则2s自动关闭
this.$refs.toast.toastPlugin('请填写内容',5000);
})
FAQ
插件的设计原则
设计插件的时候一定要看(这里以我们刚刚做好的这个插件为例)
1.一致性(与现实生活一致,界面保持一致,统一风格)
2.反馈 (使用生效给用户反馈)例如:弹窗出现
3.效率 (简化流程,清晰明确)例如:直接拿name使用
4.可控 (用户决策,结果可控)例如:有默认时间,用户也可以自由设置
如何做一款优秀的插件
1.需求分析: 存在是有意义的:这款插件主要为了解决什么问题
2.可扩展性 :很少有百分百吻合业务的插件:用户可以基于这个插件扩展自己的需求
3.组件组合 :满足多样化需求:例如list,可以在input里,可以在表格里
4.架构体系 : 1.继承体系:所有组件源头都是继承一个核心组件。2.进行分类(容器组件,功能组件分开)