uniapp中使用picker中的注意事项

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>
点赞
收藏

评论区

加载中...

相关推荐

手写Java HashMap源码

HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22

taro小程序地址选择组件

效果图:!(https://img2018.cnblogs.com/blog/1141831/201901/11418312019012021483504149988772.gif)address\_picker.tsx:importTaro,{Component}from'@

Vue 中 使用MUI Picker时间器等其他组件报错了,来来正确姿势!(~﹃~)~zZ

步骤1:   下载好Mui时间器picker依赖的js文件,文件???骚年别急下面看代码步骤2:    下面是我再mian.js里面引入mui相关的依赖js和css     !(https://oscimg.oschina.net/oscnet/1709410844d5888c0fcdbc5340c9db9a322.png) 

PHP 利用confirm删除指定数据库的数据

完整的效果图方法一a标签href中的是你要删除记录html<ahref"PHPtest.php?name1"onclick"returnconfirm('是否要移除该小说?')"方法二下面这个方法是js代码,点击获取id,弹出提示框,确定是否删除,confirm好像可以返回true或者falsejavascriptfunctiond

Spring 3 mvc hello world例子

本篇文章中,我会使用maven构建一个基于SpringMVC的入门例子,前端标签库使用的是jstl。在开始之前,请确保你已经安装maven、eclipse以及tomcat。1.创建maven工程在eclipse的工作区中使用maven命令行创建一个空白工程,当然你也可以用eclipse的m2eclipse插件来创建。mvnarch

Spark OneHotEncoder

1、概念独热编码(OneHotEncoding) 将表示为标签索引的分类特征映射到二进制向量,该向量最多具有一个单一的单值,该单值表示所有特征值集合中特定特征值的存在。此编码允许期望连续特征(例如逻辑回归)的算法使用分类特征。对于字符串类型的输入数据,通常首先使用StringIndexer