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 属性加了个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;
}

注：disabled 属性是在onLoad时根据是否为编辑状态动态变化的，默认为false （可编辑）。

ooooooh，解决！