uniapp之w-picker使用采坑

1. uniapp之w-picker使用采坑

1.1. 前言

• 由于我是先在index页面集合了这个组件，发现该文件内容实在太多了，不好维护，所以打算把内容一个个抽成组件，在抽w-picker时，遇到了两个问题

  1. 点击取消，会调用方法，但不会产生取消隐藏效果，点击确认也一样，确认函数的确调用了，但w-picker就是不隐藏
  2. watch监听的使用，在uniapp可能有一定局限性，我使用如下形式，在h5可行，在微信小程序连错误都不报，同时也没起到作用

  watch:{
  	'formData.hospital': (val,oldval) => {
  		debugger
  		this.$refs.bedCom.initBed();
  	}
  },
  

1.2. 解决

1.2.1. 隐藏无效

• 这是 标签放置位置不对问题，请放置到根目录，不要和其它组件混用到一起

<template>
	<view class="">
		<view class="input-wrapper" @tap="showBed">
			<view style="font-size: 24upx;" class="iconfont icon-bingchuang"></view>
			<input disabled cursor-spacing="150" name="bed" class="input-row" placeholder-style="color:#828288" type="text"
			 v-model="formData.bed" placeholder="床号" />
		</view>
		<w-picker :colData="colData" :current="true" :mode="bedData.mode" @change="bedPickerChange" :defaultVal="bedData.value"
		 @confirm="onBedConfirm" ref="bed" themeColor="#f00"></w-picker>
	</view>
</template>

1.2.2. watch问题

• 改成了如下形式就兼容了h5和小程序，在onLoad生命周期调用

this.$watch('formData.hospital',(newValue,old) => {
				this.$refs.bedCom.initBed();
			});