uni-app中组件picker的基本使用（日期选择器为例）

例：需要在下图“自定义日期”中使用日期选择器

<template>
<div>
<picker mode="date" @change="bindDateChange">
<div :class="timeIndex == 4 ? 'active-time' : ''">{{anyDate}}</div>
</picker>
</div>
</template><script>
export default {
data(){
return {
timeIndex:0,
anyDate:'自定义日期'
}
},
methods:{
bindDateChange (e) {
console.log(e)
this.anyDate = e.detail.value
this.timeIndex = 4
},
changeTime(index) {
this.timeIndex = index
this.anyDate = '自定义日期'
}
}
}
</script>


效果图：（单独分出来编辑的）点击自定义日期后显示一下效果，颜色切换为蓝色，当点击图一中的其他按钮时被点击的按钮颜色发生切换，自定义按钮颜色会回复默认（以上代码显示仅如下图所示）