今天继续第二个组件的学习
标签页组件
一个标签按钮对应一个slot
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app" v-closk >
<tabs v-model="activeKey">
<pane label="one" name="1">
标签一的内容
</pane>
<pane label="two" name="2">
标签而的内容
</pane>
<pane label="three" name="3">
标签三的内容
</pane>
</tabs>
</div>
<script src="js/pane.js"></script>
<script src="js/tab.js"></script>
<script>
var app = new Vue({
el:'#app'
})
</script>
</body>
</html>
pane的
Vue.component('pane',{
name:'pane',
template:'\
<div class="pane" v-show="show">\
<slot></slot>\
</div>',
props:{
name:{
type:String,
default:''
},
label:{
type:String,
default:''
}
},
data:function(){
return {
show:true
}
},
methods:{
updateNav(){
this.$parent.updateNav();
}
},
watch:{
label(){
this.updateNav();
}
},
mounted(){
this.updateNav();
}
})
tab的
Vue.component('tabs',{
template:'\
<div class="tabs">\
<div class="tabs-bar">\
<div \
:class = "tabCls(item)"\
v-for="(item,index) in navList" \
@click = "handleChange(index)"> \
{{ item.label }}\
</div>\
<div>\
<div class="tabs-content">\
<slot></slot>\
</div>\
</div>',
props:{
value:{
type:[String,Number]
}
},
data:function(){
return {
currentValue:this.value,
navList:[]
}
},
methods:{
tabCls:function(item){
return [
'tabs-tab',
{
'tabs-tab-active':item.name == this.currentValue
}
]
},
getTabs(){
return this.$children.filter(function(item){
return item.$options.name === 'pane';
});
},
updateNav(){
this.navList = [];
var _this = this;
this.getTabs().forEach(function(pane,index){
_this.navList.push({
label:pane.label,
name:pane.name || index
});
if(!pane.name) pane.name = index;
if(index ===0 ){
if(!_this.currentValue){
_this.currentValue = pane.name || index;
}
}
});
this.updateStatus();
},
updateStatus(){
var tabs = this.getTabs();
var _this = this;
tabs.forEach(function(tab){
return tab.show = tab.name ===_this.currentValue;
})
},
handleChange:function(index){
var nav = this.navList[index];
var name = nav.name;
this.currentValue = name;
this.$emit('input',name);
this.$emit('on-click',name);
}
},
watch:{
value:function(val){
this.currentValue = val;
},
currentValue:function(){
this.updateStatus();
}
}
})
css的
[v-cloak]{
display: none;
}
.tabs{
font-size: 14px;
color:#657180;
}
.tabs-bar:after{
content:'';
display: block;
width: 100%;
height: 1px;
background: #d7dde4;
margin-top: -1px;
}
.tabs-tab{
display:inline-block;
padding:4px 16px;
margin-right: 6px;
background: #fff;
border:1px solid #D7DDE4;
cursor:pointer;
position:relative;
}
.tabs-tab-active{
color:#3399ff;
border-top:1px solid #3399ff;
border-bottom:1px solid #fff;
}
.tabs-tab-active:before{
content:'';
display:block;
height:1px;
background:#3399ff;
position:absolute;
top:0;
left:0;
right:0;
}
.tabs-content{
padding:8px 0;
}
自定义指令的学习
指令就是像v-if这种,自定义指令也是通过注册再使用,就和vue实例,组件他们一样的
同样的,也分为全局注册和局部注册
//全局注册的代码示例如下
Vue.directive(‘focus’,{
//指令选项
});
//局部注册
var app = new Vue({
el:’#app’,
directives:{
//指令选项
}
})
显然,局部的注册位置就在一个vue实例属性里面而已