小程序vant

程序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"})
}