APP端中picker点击后不弹出:
1、请确保picker标签里面嵌套了一个view,并且view里面有值
2、请确保picker中的默认值的格式跟该picker类型的值对应
例如下面:
1<view class="time_wrap"> 2 <input type="text" disabled="true" v-model="timeList.time9" placeholder="开始时间" /> 3 <picker class="pk_obj" mode="date" data-id='9' :value="date9" :start="startDate" :end="endDate" @change="bindDateChange"> 4 <view>{{date9}}</view> 5 </picker> 6 </view> 7 -至- 8 <view class="time_wrap right"> 9 <input type="text" disabled="true" v-model="timeList.time10" placeholder="结束时间" /> 10 <picker class="pk_obj" mode="date" data-id='10' :value="date10" :start="startDate" :end="endDate" @change="bindDateChange2"> 11 <view>{{date10}}</view> 12 </picker> 13 </view>
该picker以透明的形式覆盖在input标签上,如果picker标签内部不包裹一个view并且有值,或者picker的value值的格式不正确,在app端可能会弹不出来!!!
所以,当出现app端点击picker时不弹出组件,请参考如下图示,如果没有遇到该问题,那就更好了。

综上所诉,picker内应该有默认对应类型的值,但有时候我们不想让它有默认值,这时可以写个组件用一层view遮罩,当传一个空值时,组件内的遮罩就生效。
一个日期组件如下:
该代码:默认情况下传一个空值有“未选择日期”提示,点击弹出的是当前日期,同时又可以传一个正常的值正常显示,赋值也正常。
如图,还可以加一个日期图标,图标请随意,至于组件的用法,稍微了解下就会了,简单实用。

1<template> 2 3 <view> 4 5 <view class="pickerBox"> 6 <view class="pk_img"> 7 <image src="/static/image/icon/pk.png" mode=""></image> 8 </view> 9 <picker :class="{isOp:!hasDate}" :mode="pMode" :value="dateVal" :start="sDate" :end="eDate" :disabled="disabled" @change="changeVal" @cancel="cancelFun"> 10 <view>{{dateVal}}</view> 11 </picker> 12 <view v-if="!hasDate" class="noDateBlock">请选择日期</view> 13 </view> 14 15 </view> 16 17</template> 18 19<script> 20 21 export default { 22 23 name:"date-row", 24 props:{ 25 sDate:{ 26 type:String, 27 default:"1920-01-01" 28 }, 29 eDate:{ 30 type:String, 31 default:"2099-01-01" 32 }, 33 val:{ 34 type:String, 35 default:"" 36 }, 37 pMode:{ 38 type:String, 39 default:"date" 40 }, 41 disabled:{ 42 type:Boolean, 43 default:false 44 } 45 }, 46 computed:{ 47 dateVal(){ 48 return this.val == "" ? this.getDate() : this.val; 49 }, 50 hasDate(){ 51 return this.val == "" ? false : true; 52 } 53 }, 54 methods:{ 55 changeVal(e){ 56 this.$emit("change",e); 57 }, 58 cancelFun(e){ 59 this.$emit("cancel",e); 60 }, 61 getDate() { 62 const date = new Date(); 63 let year = date.getFullYear(); 64 let month = date.getMonth() + 1; 65 let day = date.getDate(); 66 67 month = month > 9 ? month : '0' + month;; 68 day = day > 9 ? day : '0' + day; 69 return `${year}-${month}-${day}`; 70 } 71 } 72 } 73 74</script> 75 76<style lang="scss"> 77 78 .pickerBox{ 79 width: auto; 80 display: flex; 81 flex-flow: row nowrap; 82 align-items: center; 83 position: relative; 84 .pk_img{ 85 width: 40upx; 86 image{ 87 width: 26upx; 88 height: 26upx; 89 } 90 } 91 picker{ 92 width: auto; 93 height: auto; 94 font-size: 30upx; 95 } 96 .isOp{ 97 opacity: 0; 98 } 99 .noDateBlock{ 100 width:100%; 101 font-size: 26upx; 102 position: absolute; 103 top:50%; 104 left: 50%; 105 text-align: center; 106 transform: translate(-50%,-50%); 107 pointer-events: none; 108 box-sizing: border-box; 109 padding-right: 14upx; 110 } 111 } 112 113 114</style>