例:需要在下图“自定义日期”中使用日期选择器
(图一)
首先我们可以在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>
效果图:(单独分出来编辑的)点击自定义日期后显示一下效果,颜色切换为蓝色,当点击图一中的其他按钮时被点击的按钮颜色发生切换,自定义按钮颜色会回复默认(以上代码显示仅如下图所示)