分类.png

<van-popup v-model="show" round closeable position="bottom" :style="{ height: '392px' }" >
      <div class="popupTop">
        <div class="popupTopTitle">筛选</div>
      </div>

      <div class="popupContent">
        <ul>
          <li @click="toggleSelectAll" class="checkLiBtn" :class="{ active: selectAllActive }">
            全选
          </li>
          <li v-for="(item, index) in items" :key="index" @click="toggleItem(index)" class="checkLiBtn" :class="{  active: isSelected(index) }">
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="popupBottom">
        <van-button  class="resetBtn" @click="resetSelection">重置</van-button>
        <van-button  class="confirmBtn" @click="printSelection">确定</van-button>
      </div>

    </van-popup>

show:true,
items: ['分类1', '分类2', '分类3', '分类4'], // 分类列表
selectedItems: [], // 已选中的分类
selectAllActive: false // 全选按钮的活动状态

toggleSelectAll() {
      this.selectAllActive = !this.selectAllActive;
      if (this.selectAllActive) {
        this.selectedItems = [...this.items]; // 全选
      } else {
        this.selectedItems = []; // 取消全选
      }
    },
    toggleItem(index) {
      const item = this.items[index];
      const itemIndex = this.selectedItems.indexOf(item);
      if (itemIndex > -1) {
        this.selectedItems.splice(itemIndex, 1); // 取消选择
      } else {
        this.selectedItems.push(item); // 选择
      }
      this.updateSelectAllActive();
    },
    isSelected(index) {
      const item = this.items[index];
      return this.selectedItems.includes(item);
    },
    updateSelectAllActive() {
      if (this.selectedItems.length === this.items.length) {
        this.selectAllActive = true;
      } else {
        this.selectAllActive = false;
      }
    },
    resetSelection() {
      this.selectedItems = [];
      this.selectAllActive = false;
    },
    printSelection() {
      const selectedItemsToPrint = this.selectedItems.filter(item => item !== '全选');
      console.log(selectedItemsToPrint);
    }

.popupTop{
  border-bottom:1px solid #E1E1E1;
  height:54px;
  position: relative;
}
.popupTopTitle{
  text-align: center;
  line-height: 54px;
  font-size:16px;
  color:#000;
}
.popupClose{

  position: absolute !important;
  right:10px;
  top:50%;

  color:#999;
  transform: translate(-50%,-50%);
}
.popupBottom{
  position: absolute;
  bottom:0;
  width:100%;
  height:80px;
  justify-content: space-around;
  display:flex;align-items: center;
}
.resetBtn{
  width: 140px;
  height: 44px;
  background: rgba(242, 242, 242, 1)!important;
  text-align: center;
  border-radius: 7px!important;
  font-size:16px!important;
  color:rgba(34, 34, 34, 1)!important;
  border:none;
}
.confirmBtn{
  width: 204px;
  height: 44px;
  background: rgba(56, 117, 197, 1)!important;
  text-align: center;
  border-radius: 7px!important;
  font-size:16px!important;
  color:#fff!important;
  border:none;
}
.checkLiBtn{
  width:89px;
  height:32px;
  border-radius: 4px;
  background:rgba(240, 241, 243, 1);
  border:1px solid rgba(240, 241, 243, 1);
  text-align: center;
  color:rgba(36, 38, 41, 1);font-size: 13px;
  float:left;
  margin: 7px;
  line-height: 32px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding:0 10px;
}

.checkLiBtn.active{
  border:1px solid rgba(56, 117, 197, 1);
  color:rgba(56, 117, 197, 1);
  background:rgba(228, 240, 255, 1);
}
.popupContent{
  height:calc(392px - 135px);overflow: auto;
  overflow-x: hidden;
}