Wechat applet -picker component is repackaged and the disabled attribute is added -- above

Premise ： In the wechat applet , Use wechat acoustic components picker when , Only for the present picker Set up disabled Ash setting function , But it can't make picker A specific option in the component is grayed out , Sometimes this situation will not apply to some functions ！！

So here is a new package  custom-picker Components ---- similar picker Components , However, it has the function of graying out options

Click here ： Wechat applet -picker Component reseal increase disabled attribute -- Below

As shown in the figure ：

When picker When one of the items is not selectable , It will be as shown in the figure below , The color is grey , And the user cannot click to select .

---

The code starts here ： 

The following is in the parent component orderInfo Using subcomponents in custom-picker

// orderInfo.wxml
<view class="cell-section">
    <text class="cell-title isrequired"> payment method </text>
    <view class="cell-input" bindtap="showCustomPicker" data-id="payWayList">
             <custom-picker 
             id='custom-picker-payWayList' 
             bindcustomEvent="bindcustomPickerChange" 
             value="{
   {code}}" 
             range="{
   {selectList.payWayList}}" 
             range-key="nameZH" 
             >
                <text class="{
   {form.paymentMethod ? '':'gray'}} weui-input">{
   {form.paymentMethod || ' Please select '}}</text>
             </custom-picker>
     </view>
</view>


<view class="cell-section">
            <text class="cell-title isrequired"> Credit granting method </text>
            <view class="cell-input" bindtap="showCustomPicker" data-id="creditMethodList">
              <custom-picker 
                id='custom-picker-creditMethodList'     
                bindcustomEvent="bindcustomPickerChange" 
                value="{
   {code}}" 
                range="{
   {selectList.creditMethodList}}" 
                range-key="nameZH">
                <text class="{
   {form.creditMethod ? '':'gray'}} weui-input">{
   {form.creditMethod || ' Please select '}}</text>
              </custom-picker>
            </view>
</view>

 ️ Use here this.selectComponent() Method to get the instance of the sub component

Because the page uses multiple custom-picker Components , So each custom-picker Component's id Needs must be unique ！ In this way, the instance objects of each sub component can be obtained separately

// orderInfo.js

Page({
    //  Trigger customPicker.showPicker event , Show the selection box 
    showCustomPicker(e){
    //  Communication between components , The parent component can be this.selectComponent Method to get the child component instance object , In this way, you can directly access any data and methods of the component .
    const customPicker = this.selectComponent(`#custom-picker-${e.currentTarget.dataset.id}`) //  Get the sub component instance object 
    customPicker.showPicker()
  },
    
    //  Here is the callback event of the custom component 
    bindcustomPickerChange(e){
        //  adopt this.setData Store the data you want 
        console.log(e)
        const eValue = e.detail
         By getting the lower scale value of the corresponding option , Do analysis and take value 
        
        this.setData({
            ...
        })

    }

})

// orderInfo.wxss
.isrequired::before{
  content: '*';
  display: block;
  color: #f00;
  position: absolute;
  left: 10rpx;
}
.cell-section {
  position: relative;
  display: flex;
  border-bottom: 1rpx solid #D9D9D9;
  margin-left: 15px;
}
.cell-title {
  margin-top: .77em;
  margin-bottom: .3em;
  padding-left: 15px;
  padding-right: 15px;
  color: #999999;
  font-size: 14px;
}
.cell-input {
  flex: 2;
  padding-right: 15px;
  text-align: right;
}
.gray {
  color: #6e6d6d;
}

 ---- File directory

// orderInfo.json
{
  "navigationBarTitleText": " Order details ",
  "usingComponents": {
    "custom-picker": "../components/customPicker/index"
  }
}

Here is the following ：
Wechat applet -picker Component reseal increase disabled attribute -- Below ：custom-picker Package of components https://blog.csdn.net/q1ngqingsky/article/details/122621678