类似 van-stepper 【步进器】、tabbar 【标签栏】等的实现!
注意:一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。
<rui-navbar :navbars="navbars" v-model="index" @change="getCurrentNavbar"></rui-navbar>
注意:此处 v-model 内部的值可以是任意其他字段!
props: {
navbars: {
type: Array,
default: []
},
// 此处一定要用value
value: {
type: Number,
default: 0
}
}
注意:此处接收 v-model 值的参数名字段必须是value!
data(){
return {
status: this.value
}
}
注意:此处是将 value 的值给组件的变量,组件内部操作,直接改变该变量!必须赋值 value,否则调用组件时,不能修改默认值!
watch: {
value: {
handler(newVal, oldVal) {
this.status = newVal;
},
deep: true,
immediate: true
},
status(val){
this.$emit('input', val);
}
}
注意:1. 将更新的 value 赋值 status;status 新的值通过自定义的 input 事件抛出! 2. status 新的值通过自定义的 input 事件抛出! 3. status 新的值通过自定义的 input 事件抛出!
methods: {
changeNavbar: function(value){
this.status = value;
var text = this.navbars[value];
this.$emit('change', {value,text});
}
}
var ruiNavbar = {
props: {
navbars: {
type: Array,
default: []
},
value: {
type: Number,
default: 0
}
},
data(){
return {
status: this.value
}
},
watch: {
value: {
handler(newVal, oldVal) {
this.status = newVal;
},
deep: true,
immediate: true
},
status(val){
this.$emit('input', val);
}
},
methods: {
changeNavbar: function(value){
this.status = value;
var text = this.navbars[value];
this.$emit('change', {value,text});
}
},
template: `
<div class="rui-navbar-content">
<div :class="'rui-fg rui-flex-cc ' + (status == index ? 'rui-color6' : '')" @click="changeNavbar(index)" v-for="item,index in navbars" key="navbars">
<span class="rui-navbar-title" v-html="item"></span>
</div>
</div>
`
}
Vue.component('rui-navbar', ruiNavbar)