var base = { //公用方法
methods:{
show:function(){
this.visible = true
},
hide:function () {
this.visible = false
},
toggle:function(){
this.visible = !this.visible
}
},
data:function () {
return {
visible : false
}
}
}
Vue.component('tooltip',{
template:`
<div>
<span @mouseenter="show" @mouseleave="hide">byx</span>
<div v-if="visible">表严肃</div>
</div>
`,
mixins:[base]
})
Vue.component('popup',{
template:`
<div>
<button @click="toggle">popup</button>
<div v-if="visible">
<h4>title</h4>
Stephen Hawking is one of the great scientists in the history, whose brilliant idea about universe opens the door for people to get to know the universe. Hawking is also
a humorous person that he has showed in the movies and the public loved him so much.
As a father, his suggestions to the children are very impressive.
</div>
</div>
`,
mixins:[base],
data:function () {
return {
visible :true
}
},
})
var app = new Vue({
el:"#app",
data:{
},
})