今天咱们来玩一下vue中的自定义组件,此案例直接通过script引入js的形式定义组件
我是简单的写了一个弹出框的小插件
css样式–这就不需要解释了吧,强撸
<style>
button{
width:100px;
height:30px;
background: red;
border-radius:10px;
color: #fff;
}
.dialog{
width:300px;
height:200px;
background: rgba(0,0,0,.3);
border-radius:10px;
position: fixed;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
.dialog button{
position: absolute;
right:-5px;
width: 20px;
height:20px;
border-radius:10px;
top:-5px;
text-align: center;
line-height:10px;
}
.dialog p{
text-align: center;
}
</style>
html结构
<div id="app">
<button @click="showDialog">自定义弹框</button>
</div>
组件核心js
var Alert = {}
//1.0 此处的install方法 是vue中规定好的
Alert.install = function(){
//2.0 通过extend来定义自己的组件模板,最终会得到组件模板构造函数
var AlertConstructor = Vue.extend({
template:'<div v-if="isShow" class="dialog"><p>{{msg}}</p><button @click="close">x</button></div>',
data(){
return {
msg:'hello',
isShow:false
}
},
methods:{
close(){
this.isShow = false
}
}
})
// 3.0 通过new AlertConstructor 会得到组件对象
var Instance = new AlertConstructor({
el:document.createElement('div')
})
// 4.0 将$alert方法挂载到原型上,外界可以访问到,并且将自己定义的组件append到body中
Vue.prototype.$alert = function(text){
document.body.appendChild(Instance.$el)
Instance.isShow = true
Instance.msg = text
}
}
Vue.use(Alert)
var vm = new Vue({
el:'#app',
methods:{
showDialog(){
vm.$alert('错误提示框')
}
}
})