vue3 + uni-app 内置组件checkbox实现全选,取消全选功能(静态源码)

<template>
  <view id="prescription_record">
    <view class="record-top">
      <view>共3条记录</view>
      <view class="top-right" @click="fitFn">
        <template v-if="fit">
          <text style="line-height: 45rpx;">完成</text>
        </template>
        <template v-else>
          <uni-icons type="list" size="25"></uni-icons>
          <text style="line-height: 45rpx;">管理</text>
        </template>

      </view>
    </view>


    <!-- 列表 -->
    <checkbox-group @change="changeCheckbox">
      <view class="record-mid" v-for="item in items" :key="item.value">
        <!-- <checkbox :value="item.value" :checked="item.checked"></checkbox> -->
        <view class="mid-top">
          <view style="color: #666;font-size: 29rpx;text-align: center;">
            <checkbox :value="item.value" :checked="item.checked" v-if="fit"></checkbox>
            <text>2024年2月18日16:02:43</text>
          </view>
          <view>已完成</view>
        </view>

        <view class="dot-cont">
          <view class="dot-top">
            <view class="dot-left">
              <view> <uni-list-chat :avatar-circle="true"
                  avatar="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png"></uni-list-chat></view>
            </view>
            <view class="dot-right">
              <view><text>施医生&nbsp;&nbsp;</text> <text style="color: #666;font-size: 24rpx;">主任医师&nbsp;|&nbsp;神经外科</text>
              </view>
              <view style="color: #666;margin-top: 5rpx;"><text>临床诊断：</text> <text
                  style="color: #666;font-size: 24rpx;">多吃药，少睡觉</text></view>
            </view>
          </view>
          <view class="dot-bottom">
            <view class="bottom-left">成药</view>
            <view class="bottom-right">磷酸铝凝胶、特级西洋参、氯霉素滴眼液、布洛芬颗粒</view>
          </view>
        </view>
      </view>
    </checkbox-group>
    <view class="prescription-bottom" v-if="fit">
      <view class="bottom-text">
        <checkbox :checked="allCheck" @tap="allChecked">全选&nbsp; <text style="font-size: 26rpx;color: #666;">共{{
          checkedData.length }}条</text> </checkbox>
        <!-- <text class="">共{{ checkedData.length }}条</text> -->
      </view>
      <view class="bottom-button" style="display: flex;">
        <button type="default" class="button"
          style="border: 2rpx solid #F1F1F1;background-color: #ffffff;width: 200rpx;border-radius: 54rpx 54rpx 54rpx 54rpx; height: 60rpx;font-size: 26rpx;line-height: 60rpx;margin-left: 30rpx;"
          @click="colseDelPopup">全部清空</button>
        <button type="primary" class="button"
          style="background-color: #3BC057;width: 200rpx;border-radius: 54rpx 54rpx 54rpx 54rpx; height: 60rpx;font-size: 26rpx;line-height: 60rpx;margin-left: 30rpx;">删除
        </button>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, reactive, watch, set, computed } from 'vue';
const items = reactive([
  { label: '选项1', value: '1', checked: false },
  { label: '选项2', value: '2', checked: false },
  { label: '选项3', value: '3', checked: false }
]);

const allCheck = ref(false)
const fit = ref(false)
const checkedData = ref([])

const fitFn = () => {
  fit.value = !fit.value
}
// const items = computed(() => {
//   console.log(122);
//   return items.map((item) => ({ ...item, checked: false }))
// })
console.log(items);


//这个函数为checkboxgroup的change事件
const changeCheckbox = (e) => {
  //循环列表先都置为false （未选中状态）
  console.log('单选');
  items.forEach((a) => {
    a.checked = false
    allCheck.value = false
  })
  //然后假如checkboxGroup传过来的 detail.value中有某个id则把这些元素的checked属性置为true(选中状态)
  items.forEach((a) => {
    console.log(e.detail.value);
    e.detail.value.forEach((b) => {
      if (a.value == b) {
        a.checked = true
      }
    })
  })
  //如果选中的checkbox的value的数组长度和后端传过来的数组长度相等则为全选状态 allCheck为true
  if (e.detail.value.length == items.length) {
    allCheck.value = true
  }
  //将选中的数组保存在某个ref中
  checkedData.value = e.detail.value
}

//这个函数单独控制全选按钮的状态 直接在这个全选按钮添加@tap点击事件就行
const allChecked = () => {
  //更改选中状态
  allCheck.value = !allCheck.value
  console.log(allCheck.value, '全选');
  //如果全选全部置为ture
  if (allCheck.value == true) {
    items.forEach((a) => {
      a.checked = true
    })
    checkedData.value = items.map((item) => { return item.value })
  } else {
    items.forEach((a) => {
      a.checked = false
    })
    checkedData.value = []
  }
  console.log(items);
}
</script>

<style scoped lang="scss">
.record-top {
  padding: 20rpx 20rpx;
  display: flex;
  justify-content: space-between;

  .top-right {
    // float: right;
    display: flex;
    justify-content: center;
  }
}

.record-mid {
  width: 95%;
  height: 353rpx;
  background: #FFFFFF;
  border-radius: 18rpx 18rpx 18rpx 18rpx;
  padding: 20rpx 25rpx;
  margin: 0 auto 20rpx;

  .mid-top {
    display: flex;
    justify-content: space-between;
    padding-bottom: 20rpx;
    border-bottom: 1px solid #dbd8d8;
  }

  .dot-cont {
    height: 225rpx;
    border-radius: 18rpx 18rpx 18rpx 18rpx;
  }

  .dot-top {
    display: flex;
    margin-top: 10rpx;

    .dot-right {
      padding: 20rpx 0;
    }

  }

  .dot-bottom {
    display: flex;
    margin-top: 10rpx;

    .bottom-left {
      width: 90rpx;
      text-align: center;
      color: #666;
    }

    .bottom-right {
      flex: 1;
      font-size: 29rpx;
    }

  }
}

.prescription-bottom {
  width: 100%;
  background: #FFFFFF;
  height: 200rpx;
  display: flex;
  position: fixed;
  justify-content: center;
  bottom: 0;
  padding: 40rpx 20rpx;

  .bottom-button {
    margin-left: 50rpx;
  }

  .bottom-text {
    margin-top: 10rpx;

  }
}

::v-deep .uni-list-chat__container {
  padding: 20rpx 0;
}

::v-deep .wx-checkbox-input {
  // 复选框中对号的位置的更改
  margin: 0rpx 8rpx 5rpx 1rpx;
  width: 32rpx;
  height: 32rpx;
  border-radius: 50% !important;
  border: 2rpx solid #828181 !important;
}

::v-deep .wx-checkbox-input.wx-checkbox-input-checked {
  border: 2rpx solid #3BC057 !important;
  background-color: #3BC057 !important;
  color: #FFFFFF !important;
}

::v-deep .wx-checkbox-input.wx-checkbox-input-checked::before {
  color: #FFFFFF !important;
}</style>