extend()是一个全局构造器,生成的是一个还没挂载到页面元素上的组件实例。
在全局挂载插件的形式全局注册,就需要用到vue.use()方法,官方文档:
所以插件必须是一个对象,并且提供install方法,注册的时候自动调用该方法。
所以组件的写作步骤就清晰了一些了,实践出真知,现在就来练习一下写一个简约版的全局alert弹框
1、在components文件夹下新建alert文件夹,里面首先新建一个alert.vue文件
<!-- alert -->
<template>
<div class="alert" v-show="showAlert">
<p class="msg">{{ msg }}</p>
</div>
</template>
<script>
export default {
props: {
msg: {
type: String,
default: ''
},
showAlert: {
type: Boolean,
default: false
}
},
data() {
return {};
},
//方法集合
methods: {}
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.alert {
position: fixed;
left: 50%;
transform: translateX(-50%);
.msg {
text-align: center;
font-size: 20px;
padding: 5px 10px;
}
}
</style>
2、然后在alert文件下再新建一个alert.js文件,写扩展插件的js
import Alert from "./alert.vue";
const ALERT = {
install(Vue) {
Vue.component('alert', Alert); // 一定先注册
Vue.prototype.$alert = (text) => {
let VueAlert = Vue.extend({
data() {
return {
msg: '',
showAlert: false
}
},
render(h) {
let props = {
msg: this.msg,
showAlert: this.showAlert,
}
return h('alert', {
props
})
}
});
let newAlert = new VueAlert();
let vm = newAlert.$mount();
let el = vm.$el;
document.body.appendChild(el); // 添加到页面中
vm.showAlert = true;
vm.msg = text;
}
}
}
export default ALERT;
3、在main.js中引入
、、、、
import diyAlert from '@/components/alert/alert'; // extentd写alert
、、、
Vue.use(diyAlert);
4、这样就可以在全局调用了:
<!-- extend写message -->
<template>
<div class="extentd">
<el-button type="primary" @click="alert">alert</el-button>
</div>
</template>
<script>
export default {
data() {
return {};
},
//方法集合
methods: {
alert() {
this.$alert('hahahah');
}
}
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
</style>
剩下的就是在此基础上进行功能性扩展了,比如关闭,动效等,就简单了。