uniapp中使用picker中的注意事项

APP端中picker点击后不弹出：

一、请确保picker标签里面嵌套了一个view，而且view里面有值

二、请确保picker中的默认值的格式跟该picker类型的值对应

例以下面：

<view class="time_wrap">
                                <input type="text" disabled="true" v-model="timeList.time9" placeholder="开始时间" />
                                <picker class="pk_obj" mode="date" data-id='9' :value="date9" :start="startDate" :end="endDate" @change="bindDateChange">
                                    <view>{{date9}}</view>
                                </picker>
                            </view> -至- <view class="time_wrap right">
                                <input type="text" disabled="true" v-model="timeList.time10" placeholder="结束时间" />
                                <picker class="pk_obj" mode="date" data-id='10' :value="date10" :start="startDate" :end="endDate" @change="bindDateChange2">
                                    <view>{{date10}}</view>
                                </picker>
                            </view>

该picker以透明的形式覆盖在input标签上，若是picker标签内部不包裹一个view而且有值，或者picker的value值的格式不正确，在app端可能会弹不出来！！！

 

因此，当出现app端点击picker时不弹出组件，请参考以下图示，若是没有遇到该问题，那就更好了。

 

 综上所诉，picker内应该有默认对应类型的值，但有时候咱们不想让它有默认值，这时能够写个组件用一层view遮罩，当传一个空值时，组件内的遮罩就生效。

一个日期组件以下：

该代码：默认状况下传一个空值有“未选择日期”提示，点击弹出的是当前日期，同时又能够传一个正常的值正常显示，赋值也正常。

如图，还能够加一个日期图标，图标请随意，至于组件的用法，稍微了解下就会了，简单实用。

<template>
    
    <view>
        
        <view class="pickerBox">
            <view class="pk_img">
                <image src="/static/image/icon/pk.png" mode=""></image>
            </view>
            <picker :class="{isOp:!hasDate}" :mode="pMode" :value="dateVal" :start="sDate" :end="eDate" :disabled="disabled" @change="changeVal" @cancel="cancelFun">
                <view>{{dateVal}}</view>
            </picker>
            <view v-if="!hasDate" class="noDateBlock">请选择日期</view>
        </view>
        
    </view>
    
</template>

<script> export default { name:"date-row", props:{ sDate:{ type:String, default:"1920-01-01" }, eDate:{ type:String, default:"2099-01-01" }, val:{ type:String, default:"" }, pMode:{ type:String, default:"date" }, disabled:{ type:Boolean, default:false } }, computed:{ dateVal(){ return this.val == "" ? this.getDate() : this.val; }, hasDate(){ return this.val == "" ? false : true; } }, methods:{ changeVal(e){ this.$emit("change",e); }, cancelFun(e){ this.$emit("cancel",e); }, getDate() { const date = new Date(); let year = date.getFullYear(); let month = date.getMonth() + 1; let day = date.getDate(); month = month > 9 ? month : '0' + month;; day = day > 9 ? day : '0' + day; return `${year}-${month}-${day}`; } } } </script>

<style lang="scss"> .pickerBox{ width: auto; display: flex; flex-flow: row nowrap; align-items: center; position: relative; .pk_img{ width: 40upx; image{ width: 26upx; height: 26upx;
            } } picker{ width: auto; height: auto; font-size: 30upx;
        } .isOp{ opacity: 0;
        } .noDateBlock{ width:100%; font-size: 26upx; position: absolute; top:50%; left: 50%; text-align: center; transform: translate(-50%,-50%); pointer-events: none; box-sizing: border-box; padding-right: 14upx;
        } } </style>