uniapp中使用picker中的注意事项

Easter79
• 阅读 1461

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时不弹出组件,请参考如下图示,如果没有遇到该问题,那就更好了。

uniapp中使用picker中的注意事项

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

一个日期组件如下:

该代码:默认情况下传一个空值有“未选择日期”提示,点击弹出的是当前日期,同时又可以传一个正常的值正常显示,赋值也正常。

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

uniapp中使用picker中的注意事项

<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>
点赞
收藏
评论区
推荐文章
Easter79 Easter79
3年前
taro小程序地址选择组件
效果图:!(https://img2018.cnblogs.com/blog/1141831/201901/11418312019012021483504149988772.gif)address\_picker.tsx:importTaro,{Component}from'@
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Easter79 Easter79
3年前
Vue 中 使用MUI Picker时间器等其他组件报错了,来来正确姿势!(~﹃~)~zZ
步骤1:   下载好Mui时间器picker依赖的js文件,文件???骚年别急下面看代码步骤2:    下面是我再mian.js里面引入mui相关的依赖js和css     !(https://oscimg.oschina.net/oscnet/1709410844d5888c0fcdbc5340c9db9a322.png) 
陈占占 陈占占
2年前
PHP 利用confirm删除指定数据库的数据
完整的效果图方法一a标签href中的是你要删除记录html<ahref"PHPtest.php?name1"onclick"returnconfirm('是否要移除该小说?')"方法二下面这个方法是js代码,点击获取id,弹出提示框,确定是否删除,confirm好像可以返回true或者falsejavascriptfunctiond
Stella981 Stella981
3年前
Spring 3 mvc hello world例子
本篇文章中,我会使用maven构建一个基于SpringMVC的入门例子,前端标签库使用的是jstl。在开始之前,请确保你已经安装maven、eclipse以及tomcat。1.创建maven工程在eclipse的工作区中使用maven命令行创建一个空白工程,当然你也可以用eclipse的m2eclipse插件来创建。mvnarch
Stella981 Stella981
3年前
Spark OneHotEncoder
1、概念独热编码(OneHotEncoding) 将表示为标签索引的分类特征映射到二进制向量,该向量最多具有一个单一的单值,该单值表示所有特征值集合中特定特征值的存在。此编码允许期望连续特征(例如逻辑回归)的算法使用分类特征。对于字符串类型的输入数据,通常首先使用StringIndexer
Wesley13 Wesley13
3年前
CSS基础_CSS样式的几种书写形式
1.内嵌式将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:<head<styletype"text/CSS"标签名/选择器{属性1:属性值1;属性2:属性值2;属性3:属性值3;
Wesley13 Wesley13
3年前
oracle小数点前零丢失的问题
1.问题起源 oracle数据库字段值为小于1的小数时,使用char类型处理,会丢失小数点前面的0 例如0.35就变成了.35 2.解决办法:(1)用to\_char函数格式化数字显示 select    to\_char(0.338,'fm9999999990.00')fromdual; 结果:0.34 
Spring Boot Nacos配置无法覆盖@Value定义的默认值
缘起新增了一个功能,使用了@Value("$xxx.aaa:b")这种形式获取一个变量,默认值b是在配置中找不到对应的值时进行赋默认值,项目还集成了Nacos,在Nacos中配置了xxx.aaac,启动后发现获取的值是默认的,不是Nacos的,当把默认值去
小万哥 小万哥
7个月前
C++ 默认参数与引用传递:语法、用法及示例
C默认参数默认参数概述在C中,函数参数可以拥有默认值。这意味着,在调用函数时,如果省略了某个参数,那么将使用为该参数指定的默认值。设置默认参数默认参数值使用等号符号进行设置,位于参数声明的类型之后。例如:cvoidmyFunction(stri
Easter79
Easter79
Lv1
今生可爱与温柔,每一样都不能少。
文章
2.8k
粉丝
5
获赞
1.2k