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>

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


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM