uniapp中使用picker中的注意事項

APP端中picker點擊后不彈出：

1、請確保picker標簽里面嵌套了一個view，並且view里面有值

2、請確保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>