程序vant"/>
小程序vant
问题
改小程序的时候发现了一个隐藏已久的bug,vant-field设置为textarea类型后,popup弹出来的时候placeholder的文字非常明显,如下图。
如果popup里面的内容和textarea重合,textarea内容还会盖过popup,如下图。
原因
vant-weapp官方说明了textarea是原生组件,层级过高,具体可以看微信官方文档对原生组件的说明。
链接: 微信官方文档
解决办法
网上有很多是用view写一个来代替textarea,但是我的这样弄太麻烦了,所以放弃了。
因为textarea属于原生组件,但是input只在focus时表现为原生组件,也就是说vant-field不是textarea类型,并且没有用focus时不是原生组件,不会出现层级过高的现象。所以在popup显示时将textarea改为text,不显示时再改为textarea类型。效果还行,有时候还是会出现一闪而过的重叠。
<van-field value="{{ workplace }}" label="工作地" placeholder="请选择" right-icon="arrow" bindtap="showPlace" readonly type="{{textarea}}" autosize />
<van-popup show="{{showplace}}" position="bottom" ><van-picker show-toolbar columns="{{ workplaces }}" title='主要工作' bind:cancel="onCancelPlace" bind:confirm="onConfirmPlace"/></van-popup>
showPlace:function() {this.setData({showplace: true,textarea2: "text",textarea: "text"});
},
onCancelPlace(e){this.setData({showplace: false,workplace:"",textarea2: "textarea",textarea: "textarea"})
},
onConfirmPlace(event){this.setData({showplace: false,workplace:event.detail.value,textarea2: "textarea",textarea: "textarea"})
}
更多推荐
小程序vant
发布评论