vue3 多选框选中取消—实现多标签选择

一、实现效果：点击选中和取消选中--最多仅可选中三个

（1）标签：默认状态

 （2）展开状态

（3）确认状态

二、代码部分

//templete
  <div class="inputBox">
          <div class="left">内容领域</div>
            //未选择标签时展示
          <input v-if="accountInfo.contentList && accountInfo.contentList.length==0"
                 class="center"
                 type="text"
                 readonly
                 @click="showcontentListbtn"
                 placeholder="请输入内容领域">
            //已有选择标签展示
          <div v-else
               class="center"
               @click="showcontentListbtn">
            <div class="center_label"
                 v-for="(item,index) in accountInfo.contentList"
                 :key="index">{{item.labelName}}</div>

          </div>
            //弹出的选择框
          <div class="linkBox"
               v-if="showcontentList">
            <div class="choosecontentWrap">
              <div class="cancel_btn"
                   @click="contentCancelbtn">取消</div>
              <div class="confirm_btn"
                   @click="contentConfirmbtn">确认</div>
              <div class="title">选择内容领域</div>
              <div class="content_box">
                <div :class="['content_columnitem',items.chooseFlag?'on':'']"
                     v-for="(items,index) in labelList"
                     :key="index"
                     :data-index="index"
                     :data-labelCode="items.labelCode"
                     @click="chooseLabel">
                  {{items.labelName}}
                </div>
              </div>
            </div>
          </div>
          <div class="right special">
            <img class="info_tip_arrow"
                 src="@/assets/validation/sign-arrow.png"
                 alt="">
          </div>
        </div>

//script
import { Toast, Dialog } from 'vant'
const accountInfo = ref({
      contentList: [], //内容领域
    })
const labelList = ref() //全部label 列表
const labelIds = ref([]) //所有的labelid列表
const chooselabelIds = ref([]) //选中的labelid 列表
const chooselabelIdsArr = ref([]) //选中的labelid 列表
//选择内容领域
const showcontentList = ref(false)
const showcontentListbtn = () => {
      initLabel(labelList.value)
      showcontentList.value = true
    }
//内容领域弹框取消事件
    const contentCancelbtn = () => {
  showcontentList.value = !showcontentList.value
   }
//内容领域弹框确认事件
    const contentConfirmbtn = () => {
      initchooseLabel()
      accountInfo.value.contentList = chooselabelIdsArr.value
      showcontentList.value = !showcontentList.value
    }
//获取内容领域标签
    const getcontentLabel = () => {
      let platId = accountInfo.value.platformId
        //调用接口获取内容信息
      platformLabel({ platId }).then((res) => {
        labelList.value = res.data.labels
        initLabel(res.data.labels)
      })
    }
//初始化label 数据
    const initLabel = (dataList) => {
      // console.log(dataList)
      let chooselabelIds = []
      let chooselabelIdsArr = []
      dataList.forEach((ele) => {
        labelIds.value.push(ele.labelCode)
      })
      accountInfo.value.contentList.forEach((ele) => {
        chooselabelIds.push(ele.labelCode)
        chooselabelIdsArr.push(ele)
      })
      dataList.forEach((ele) => {
        if (chooselabelIds.includes(ele.labelCode)) {
          ele.chooseFlag = true
        } else {
          ele.chooseFlag = false
        }
      })
      labelList.value = dataList
      chooselabelIds.value = chooselabelIds
      chooselabelIdsArr.value = chooselabelIdsArr
      initchooseLabel()
    }
//选中标签方法
    const chooseLabel = (e) => {
      let chooseFlag =
        labelList.value[Number(e.target.getAttribute('data-index'))].chooseFlag
      if (chooselabelIdsArr.value.length == 3 && !chooseFlag) {
        Toast({
          message: '最多仅可选择3项，请取消已选项后再进行勾选',
          position: 'bottom',
        })
        return
      }
      labelList.value[Number(e.target.getAttribute('data-index'))].chooseFlag =
        !labelList.value[Number(e.target.getAttribute('data-index'))].chooseFlag
      // console.log(labelList.value)
      initchooseLabel()
    }
//格式化选中数据
    const initchooseLabel = () => {
      let chooseArr = []
      let chooseid = []
      labelList.value.forEach((ele) => {
        if (
          ele.chooseFlag &&
          !chooselabelIdsArr.value.includes(ele.labelCode)
        ) {
          chooseArr.push(ele)
          chooseid.push(ele.labelCode)
        } else if (
          !ele.chooseFlag &&
          chooselabelIdsArr.value.includes(ele.labelCode)
        ) {
          let findIndex = chooseid.findIndex((eleFindId) => {
            return eleFindId == ele.labelCode
          })
          if (findIndex != -1) {
            chooseid.splice(findIndex, 1)
            chooseArr.splice(findIndex, 1)
          }
        }
      })
      chooselabelIdsArr.value = chooseArr
      chooselabelIds.value = chooseid
      // console.log(chooselabelIdsArr.value)
      // console.log(chooselabelIds.value)
    }

onMounted(() => {
        //获取内容标签
        getcontentLabel()
      }
    })

用的vue3 需要的方法和值需要return一下

css/* 内容领域部分 */
.addplataccountWrap  .linkBox {
  position: fixed;
  top: 0rem;
  left: 0rem;
  height: 100%;
  width: 100%;
  overflow: hidden;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.4);
}
.addplataccountWrap  .choosecontentWrap{
  width: 100%;
  height: auto;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #fff;
  border-radius: 0.16rem 0.16rem 0 0;
  padding: 0.5rem 0.1rem 1rem 0.3rem;
  box-sizing: border-box;
}
.addplataccountWrap  .choosecontentWrap .confirm_btn{
  width: .60rem;
  height: .34rem;
  position: absolute;
  right: .3rem;
  top: .58rem;
  font-size: .28rem;
  color: #FF0095;
}
.addplataccountWrap  .choosecontentWrap .cancel_btn{
  width: .60rem;
  height: .34rem;
  position: absolute;
  left: .3rem;
  top: .58rem;
  font-size: .28rem;
  color: #92959D;
}
.addplataccountWrap  .choosecontentWrap  .title {
  text-align: center;
  margin-bottom: 0.48rem;
  color: #151515;
  font-size: .32rem;
  font-weight: 500;
}
.addplataccountWrap  .choosecontentWrap .content_box {
  display: flex;
  flex-wrap: wrap;
  max-height: 40vh;
  overflow-y: auto;

}
.addplataccountWrap  .choosecontentWrap .content_box .content_columnitem {
  display: flex;
  justify-content: center;
  align-items: center;
  height: .72rem;
  width: 30%;
  margin-right: .2rem;
  margin-bottom: .2rem;
  font-size: 0.12rem;
  background-color: #F2F3F5;
  box-sizing: border-box;
  border-radius: .08rem;
  font-size: .26rem;
  color: #1B1D24;
}
.addplataccountWrap  .choosecontentWrap .content_box .on {
  color: #FF0095;
  background: rgba(255, 0, 149, 0.05);
  border: .02rem solid #FF0095;
  border-radius: .08rem;
}

 三、标签处理信息

处理过后的label标签信息 

默认是没chooseFlag处理后加上的信息