Vue3:checkbox使用及限制选中数量

这篇具有很好参考价值的文章主要介绍了Vue3:checkbox使用及限制选中数量。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Vue3:checkbox使用及限制选中数量,Millia's work,vue.js,前端,javascript文章来源地址https://www.toymoban.com/news/detail-714596.html

HTML:

<!--投票列表-->
<ul class="list f16">
  <li v-for="(list,index) in listData" :key="index" >
    <!--div @click="goAbout(list.orderid)">
      img :src="list.thumb"
      <span><i>编号:</i>{{list.orderid}}</span>
    </div-->
    <h6>姓名:{{list.tpname}}</h6>
    <p>票数:{{list.num}}</p>
    <label>
      <input type="checkbox" :value="list.orderid" v-model="checkGroup" @click="getCheck($event,list.orderid)">
      <b>已选中</b>
    </label>
  </li>
</ul>


<!--投票按钮-->
<div class="endButton" @click="checkVote">
  <button>提交投票</button>
  <div class="countNum" v-if="checkGroup.length > 0">请选择<b>3</b>个,已选择<b> {{checkGroup.length}} </b>个</div>
</div>

JS:

let checkGroup = ref([]) //选中数据

//选中 限制选中数量上限在选中时校验
const getCheck =(event,orderid)=>{
  //设置最多选择三个
  if(checkGroup.value.length < 3 && event.target.checked) {
    checkGroup.value.push(orderid)
  }else if(!event.target.checked){
    checkGroup.value.splice(checkGroup.value.indexOf(orderid),1)
  }else{
    event.target.checked = false
    //提示使用vantUi
    proxy.$toast({
      message: '已超出投票人数!',
      icon: 'warning',
    });
  }
}

//提交投票 限制选中数量下限在提交时校验
const checkVote=()=>{

  //设置至少选择三个
  if(checkGroup.value.length <3){
    proxy.$toast({
      message: '至少选择三个再投票',
      icon: 'warning',
    });
    return
  }

  //其他代码

    if ("提交成功") {
      //提示使用vantUi
      proxy.$toast({
        message: '投票成功!',
        icon: 'smile',
      });
      //清除checkGroup选中数据
      checkGroup.value = []
    } else {
      //提示使用vantUi
      proxy.$toast({
        message: response.data.info,
        icon: 'warning',
      });
      //清除checkGroup选中数据
      checkGroup.value = []
    }
  })

  //其他代码

}


CSS:

/*列表样式*/
.list{display:flex;justify-content:space-between;flex-wrap:wrap;}
.list li{width:48%;background:#d71f18;border-radius:1vh;overflow:hidden;margin-top:2vh;color:#fff;text-align:center;padding-bottom:1vh;}
.list li div{position:relative;}
.list li span{display:block;position:absolute;left:1vh;bottom:1vh;background:rgba(0,0,0,0.6);padding:0 1.5vh 0 0;font-size:1.6vh;border-radius:1vh;overflow:hidden;color:#fff;}
.list li span i{display:inline-block;font-style:normal;background:#ac0006;padding:1vh 0 1vh 1vh;margin-right:1vh;}
.list li h6{padding:1.5vh 0 1vh 0;}
.list li p{padding:0 1vh;}
.list li label{display:block;background:#ffecd1;height:3.6vh;position:relative;border-radius:0.5vh;overflow:hidden;width:90%;margin:1.5vh auto 0 auto;}
.list li label:before{content:"\70b9\51fb\9009\4e2d";position:absolute;left:0;top:0;width:100%;text-align:center;color:#c0151b;line-height:3.8vh;}
.list li label input,.list li label input+b{display:none;}
.list li label input:checked+b{background:#ffcc00;display:block;position:absolute;left:0;top:0;width:100%;z-index:2;color:#c0151b;line-height:3.8vh;text-align:center;font-weight:normal;}

/*底部按钮样式*/
.endButton{position:fixed;left:0;bottom:0;width:100%;background:#ac0006;z-index:5;padding:1vh 0 1.5vh 0;color:#fff;text-align:center;}
.countNum{padding-top:1vh;font-size:1.4vh;}
.endButton button{border:none;background:none;font-size:2.4vh;font-weight:bold;}

到了这里,关于Vue3:checkbox使用及限制选中数量的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 解决elementUI中使用checkbox无法选中的问题

    事情的开始是这样的,有一个属性是isCheck,后端是没有返回这个字段的,但是前端需要将这个属性绑定到el-checkbox上去,但是前端采用循环的方式去生成el-checkbox不行。isCheck每个都有,但是就是无法选中,原因是缺少get和set方法。  原先的写法 上面的写法是不行的。 解决的

    2024年01月22日
    浏览(41)
  • 完美解决微信小程序使用复选框van-checkbox无法选中

    由于小程序使用了vant-ui框架,导致checkbox点击无法选中问题   记得定义 checked 默认值   解决办法 : 添加onChange事件,给 checked 做赋值操作。 可以打印看看console.log(e) 选中效果: 取消选中效果:    

    2024年02月12日
    浏览(78)
  • vue3 Table 分页保留选中状态

     

    2024年02月10日
    浏览(33)
  • Vue3 vxe-table 手写鼠标区域选中

    参考原文地址:vxe-table 鼠标滑动选择多行,鼠标区域选中批量操作[2]-CSDN博客 准备vxe-talbe@4.5.7,Vue@3.3.4,在原作者的基础上进行了修改,修改后和官网几乎无差别,允许左右侧固定列选中,允许任意范围选中,但是键盘监听功能没添加//感觉没啥软用.... 先看效果: 正常鼠标从左上往右下

    2024年02月05日
    浏览(53)
  • layui中多个checkbox只能进行单选且一个被选中则取消其他的选中状态

    在layui中,要实现多个checkbox只能进行单选,如果一个被选中,则取消其他的选中状态,可以通过以下步骤实现: 在HTML中,为每个checkbox元素添加相同的class属性,例如\\\"my-checkbox\\\"。 在JavaScript中,使用layui的form模块。通过调用 .on() 方法,绑定对应的触发事件。例如,可以使用

    2024年02月09日
    浏览(53)
  • 解决el-checkbox点击文字也会选中

    最近要做一个 多选框嵌套下拉框的一个功能,在点击下拉框时,多选框一直会被选中或者取消,这里做一下解决记录 首先展示一下要做的功能 出现原因: el 的checkbox的组件整个是由lable包裹的,所以重写el-checkbox就可以了 原编码: 解决: 这里用div或者span都是可以的,div会

    2024年02月05日
    浏览(41)
  • html自定义禁用状态下且已选中的checkbox

    html css实现

    2024年04月13日
    浏览(26)
  • vue3 座位选座,矩阵布局,可点击选中拖拽调换位置

    由于公司项目需求需要做一个线上设置考场相关的座位布局用于给学生考机排号考试,实现教室考场座位布局的矩阵布局,可点击选中标记是否有座无座拖拽调换位置横向纵向排列,这块的逻辑与ui网上很少有参考的价值,作者把这块逻辑实现了供大家参考 提示:使用vue3+ts实现,其

    2024年02月08日
    浏览(45)
  • vue3 element plus table selection展示数据,默认选中功能

    当打开表格数据时,可能会根据后台返回的数据,默认选中符合条件的行 这样我们就用到了el-table-column,设 type 属性为 selection 1.表格的第一行,设置为: 2.table上定义ref属性,并且定义这个变量 3.在事件中配置一下 //修改选中的行,重新赋值 //结果 注意:支持树形结构

    2024年02月11日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包