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

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

（图一）

首先我们可以在template中引入组件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>

<style>

</style>

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