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>