uniapp uview实现标签最多选中三个，超过三个提示，少于三个push进一个新数组

最新推荐文章于 2024-01-15 18:02:42 发布

技术不行但人小帅

最新推荐文章于 2024-01-15 18:02:42 发布

阅读量808

点赞数

文章标签：微信小程序 uni-app vue.js Powered by 金山文档

本文链接：https://blog.csdn.net/m0_61629497/article/details/129758448

版权

        <view style="padding:40rpx 20rpx;">
                    <u-grid :border="false" col="4">
                        <u-grid-item v-for="(item, index) in checkboxs2" :key="index" custom-style="opacity:1">
                            <view class="" style="margin:20rpx 10rpx;">
                                <u-tag :text="item.title" :plain="!item.checked" type="success" size="large" :name="index" @click="checkboxClick2($event, item)"></u-tag>
                            </view>
                        </u-grid-item>
                    </u-grid>
                </view>

checkboxs2: [
                {
                    title: '近地铁',
                    checked: false
                },
                {
                    title: '近轻轨',
                    checked: false
                },
                {
                    title: '交通便',
                    checked: false
                },
                {
                    title: '有商圈',
                    checked: false
                },
                {
                    title: '小吃多',
                    checked: false
                }
            ]

          // 判断选中的 checkbox 数量是否超过三个
          if (selectedCheckboxCount > 3) {
            // 禁用其他未选中的 checkbox
            this.checkboxs2.forEach((checkbox, index) => {
              if (!checkbox.checked && index !== event) {
                checkbox.disabled = true;
              }
            });
            // 不再将当前 checkbox 的 title 添加到数组中，并弹出提示框
            if (item.checked) {
              this.checkboxs2[event].checked = false;
              selectedCheckboxCount--;
                uni.$u.toast('最多只能选3个哦~');
            }
          } else {
            // 启用所有 checkbox
            this.checkboxs2.forEach(checkbox => {
              checkbox.disabled = false;
            });
            // 根据 checkbox 状态变化，将对应的 title 添加到或从数组中移除
            if (item.checked) {
              this.newArr2.push(item.title);
            } else {
              const titleIndex = this.newArr2.indexOf(item.title);
              if (titleIndex !== -1) {
                this.newArr2.splice(titleIndex, 1);
              }
            }
          }
          // 打印当前数组内容
          console.log(this.newArr2);
        }

效果图