使用vue开发项目,有些UI
vue使用install定义安装全局组件需要install和use这两个api来配合才能完成,组件通过export暴露出install方法 。
但如果直接将指定组件赋值到vue的prototype上,组件不需要vue.use安装直接就能用。
1.全局组件单例模式
这里通过实现一个 Notify移动端消息提示组件和加载组件,来对组件的封装过程进行详述。
实例一: Notify组件的封装
Notify.vue
export default {
name: "Notify",
data() {
return {
show1: false,
$_timer: null,
className: "fadein",
time: 2000
};
},
props: {
message: {
type: String,
required:true,
default: "提示信息"
},
visible: {
type: Boolean,
default: false
},
duration: {
type: Number,
default: 2000
},
type: {
type: String,
default: "default"
}
},
mounted() {},
methods: {
fire() {
const _this = this;
if (_this.$_timer) {
clearTimeout(_this.$_timer);
}
if (_this.visible) {
if (_this.duration) {
_this.time = _this.duration;
}
_this.$_timer = setTimeout(() => {
_this.hide();
}, _this.time);
}
},
show() {
this.className = "fad