uni-app 小程序 uni-data-picker 設置爲 disabled

背景

小程序端需要一個查看的操作，不能編輯分類，需要disabled 掉uni-data-picker。

實戰

官方文檔 說readonly可以禁用，於是嘗試：

  <uni-data-picker
                        placeholder="請選擇商品類型"
                        popup-title="請選擇商品類型"
                        :localdata="shopGoodsTypes"
                        @change="changeType"
                        :value="detail.goodsTypeId"
                        :readonly="true"
                    ></uni-data-picker>

好傢伙，連數據都不加載了……

設置5秒延時試試？網速慢的時候也解決不了問題……

換個思路，阻止input 彈出層不就ok 了?於是加了個disabled class，

  <uni-data-picker
                        placeholder="請選擇商品類型"
                        popup-title="請選擇商品類型"
                        :localdata="shopGoodsTypes"
                        @change="changeType"
                        :value="detail.goodsTypeId"
                       :class="disabled===true?'disabled':''"
                    ></uni-data-picker>

.disabled .uni-data-tree-input{
        pointer-events: none;
}

oh，解決！