小程序 ckeckbox自定义组件实现数量限制，全选时其他选项取消选择

『 MŠ..範々

已于 2024-03-27 17:44:02 修改

阅读量253

点赞数 4

文章标签：小程序 apache

于 2024-03-27 17:39:53 首次发布

本文链接：https://blog.csdn.net/weixin_63956830/article/details/137084092

版权

components自定义组件

写了两种样式的，自己选择去删除不要的代码

checkBox.wxml

<!-- 有前面方格的样式  -->
<view wx:if="{{type === 'form'}}" class="formList" style="width: {{formWidth}}; background-color: {{title === ''?'transparent':'#fff'}}">
  <view wx:if="{{title !== ''}}" class="item_title">
    <text style="margin-left: var(--paddingSize);">{{title}}</text>
  </view>
  <checkbox-group class="checkboxGroup" bindchange="{{canEdit?'checkboxChange':''}}" data-name="{{name}}" style="margin-left: var(--marginSize); background-color: {{title === ''?'transparent':'#fff'}}">
    <label class="checkboxItem" wx:for="{{checkboxList}}" wx:for-item="c" wx:key="key" bind:tap="beforeCheckboxChange">
      <checkbox value="{{c.id}}" checked="{{c.checked}}" style="display:none" disabled="{{c.disabled}}"/>
      <label class="checkboxBoxOut">
        <label wx:if="{{c.checked}}" class="checkboxBox" style="background-color:{{canEdit?'var(--themeColor)':'gray'}}">
        </label></label>
      <text class="{{c.checked?'checkboxBox_select':(c.disabled?'checkboxBox_disable':'checkboxBox')}}">{{c.value}}</text>
    </label>
  </checkbox-group>
</view>

<!-- 没有前面方格的样式  -->
<view wx:if="{{type === 'line'}}" class="line" style="width: {{formWidth}};">
  <view wx:if="{{title !== ''}}" class="line_title">{{title}}</view>
  <scroll-view scroll-y  class="line_checkList">
    <checkbox-group class="line_checkboxGroup" bindchange="{{canEdit?'checkboxChange':''}}" data-name="{{name}}">
      <label class="line_checkboxItem" wx:for="{{checkboxList}}" wx:for-item="c" wx:key="key" bind:tap="beforeCheckboxChange"> 
        <checkbox value="{{c.id}}" checked="{{c.checked}}" style="display:none" disabled="{{c.disabled}}"/>     
        <text class="{{c.checked?'line_checkboxText_select':(c.disabled?'line_checkboxText_disable':'line_checkboxText')}}" >{{c.value}}</text>
      </label>
    </checkbox-group>
  </scroll-view>
</view>

<!-- 消息框  这个自定义组件是自己写的 相当于showToast -->
<msgBox showMsgBox="{{showMsgBoxTips}}" boxType='1' msg="{{modalMsg}}" msgImg="{{msgImg}}" duration="{{duration}}" />

checkBox.wxss

.formList{
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--formTextFontSize);
  margin-bottom: 30rpx;
}

.item_title{
  width: 100%;
  height: var(--mutilInputBoxTitleHeight);
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--themeColor);
  border-top-left-radius: var(--normalBorderRadio);
  border-top-right-radius: var(--normalBorderRadio);
}

/* 复选框 */
.checkboxGroup { 
  font-size: var(--inputFontSize);
  border-bottom-left-radius: var(--normalBorderRadio);
  border-bottom-right-radius: var(--normalBorderRadio);
  margin-bottom: var(--componentMarginSize); 
  display: flex;
  flex-wrap: wrap;
  align-items: center; 
}

.checkboxItem {
  width: 33%;
  height: 60rpx;
  display: flex;
  align-items: center;
}

.checkboxBoxOut {
  width: 28rpx;
  height: 28rpx;
  background-color: #fff;
  display: inline-block;
  position: relative;
  border: 2rpx solid lightgray;
  margin-right: 12rpx;
}

.checkboxText,
.checkboxText_select,
.checkboxText_disable {
  width: 20rpx;
  height: 20rpx;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

.checkboxText_select{
  color: var(--themeColor);  
}

.checkboxText_disable{
  color: grey;
}


/* type === 'line' 没有前面的方格的样式*/
.line{
  width: 100%;
  font-size: var(--listContentFontSize);
  margin-bottom: var(--marginSize);
}

.line_title{
  width: 100%;
  height: 50rpx;
}

.line_checkList{
  width: 100%;
  max-height: 200rpx;
}
.line_checkboxGroup{
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;  
}

.line_checkboxItem{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 20rpx 20rpx 0; 
}

.line_checkboxText,
.line_checkboxText_select,
.line_checkboxText_disable
{
  padding: 8rpx 30rpx;
  border-radius: var(--normalBorderRadio);
}

.line_checkboxText{
  background-color: #eee;

}

.line_checkboxText_select{
  background-color: lightcyan;
  color: var(--themeColor);  
}

.line_checkboxText_disable{
  background-color: lightgray;
  color: grey;
}

checkBox.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    type: { // 类型 form 表单 checkbox 单选框
      type: String,
      value: 'form'
    },
    formWidth: {
      type: String,
      value: "var(--boxWidth)"
    },
    title: {
      type: String,
      value: ""
    },
    isMandatory: {
      type: Boolean,
      value: true
    },
    name: { //索引
      type: String,
      value: ""
    },
    checkboxList: { //单选项列表
      type: Array
    },
    canEdit: {
      type: Boolean,
      value: true
    },
    textColor: { //文本颜色
      type: String,
      value: ""
    },
    maxNums: { //可选最大数量
      type: String,
      value: "9999"
    },


  },

  /**
   * 组件的初始数据
   */
  data: {
    // 消息框 
    showMsgBoxTips: false,
    modalMsg: '',
    msgImg: 'error.png',
    duration: '',
  },

  /**
   * 组件的方法列表
   */
  methods: {
    beforeCheckboxChange: function(e){
      // console.log(e)
      var that = this
      var checkboxList = that.data.checkboxList
      var values = that.data.values
      var maxNums = that.data.maxNums     
      if (maxNums > values.length) {
        checkboxList.map(item => {
          item.disabled = false
        })        
      } else {
        checkboxList.map(item => {
          item.disabled = true
        })
        values.map(item => {
          checkboxList[item]['disabled'] = false
        })
      }
      this.setData({
        checkboxList,
        values,
      })
    },
    checkboxChange: function (e) {
      // console.log(e)
      var that = this
      var name = e.currentTarget.dataset.name
      var values = e.detail.value
      var checkboxList = that.data.checkboxList

      if (values.indexOf('-1') > -1) {
        // 移除选项：全部
        if (values[values.length - 1] !== '-1')
          values.splice(values.indexOf('-1'), 1)
      } else {
        if(values.length === checkboxList.length - 1)
          values = ["-1"]
      }
      if (values[values.length - 1] === '-1')
        values = ["-1"]

      for (let i = 0; i < checkboxList.length; i++) {
        checkboxList[i].checked = false
        for (let j = 0; j < values.length; j++) {
          if (checkboxList[i].id.toString() === values[j]) {
            checkboxList[i].checked = true
            break
          }
        }
      }
      that.setData({
        values,
        checkboxList
      })
      that.triggerEvent('checkboxChange', {
        name,
        values,
        checkboxList
      })
    }, // 消息提示框
    showMsgBoxTips: function (modalMsg, type, duration) {
      this.setData({
        showMsgBoxTips: true,
        modalMsg,
        msgImg: type === undefined ? 'error.png' : type + '.png',
      })
      setTimeout(() => {
        this.setData({
          showMsgBoxTips: false,
          modalMsg,
        })
      }, duration === undefined ? 1500 : duration)
    },
  },

})

使用时

  <checkBox type="line" class="modal_row" name="选项名" data-lname="列表名" title="标题" checkboxList="{{列表}}" bind:checkboxChange='checkboxChange' />

  checkboxChange: function (e) {
    // console.log(e)
    var list = e.detail.checkboxList
    let listName = e.currentTarget.dataset.lname
    let name = e.detail.name
    let values = e.detail.values

    this.setData({
      [listName]: list,
      [name]: values
    })
  },