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();
            });