zoukankan      html  css  js  c++  java
  • vue中checkbox 样式自定义重写;循环遍历checkbox,拿到不同的v-model绑定值;及获取当前checked 状态,全选和全不选等功能。

    开始写这个功能,不得不吐槽原始的checkbox,灰色小方块的丑陋,虽说eleUI,mintUI,等各种框架的单复选框已经对其优化,但还是不想要这种。那我们就来研究一下怎么处理它。

     <section class="box">
         <label  :for="item3" @click="chooseType($event,index3)"  v-for="(item3,index3) in type"  class="labelName">
            <input type="checkbox" :value="item3" :id="item3" v-model="checkedValue" class="checkboxList">            // for属性一定要与id一致,原因请看上图
            <div class="name">{{item3}}</div>  // label的值            // checkbox的v-model绑定值一定要是数组
            &nbsp;&nbsp;
            {{checkedValue}}   // 查看值
         </label>
         <button @click="chooseQu">全选</button>
         <button @click="chooseNo">全不选</button>
    
      </section>

     data: 

    data(){
            return{
              checkedValue: [],
              type:['a','b','c','d']   // 测试数据,可在mounted钩子函数中将后台数据赋值
            }
    },

    methods:

    methods:{
            chooseType(e,val){
              console.log(e.target.checked)   // 可获取当前的checked 状态
              console.log(val)                // 可获取到当前的下标。
    
            },
            chooseQu(){
              // document.querySelectorAll('.checkboxList').setAttribute("checked","true");
              this.checkedValue = this.type ;  //将原数据全部赋值给checkedValue,全部置为true.  
            },
            chooseNo(){
              this.checkedValue = [] ;    // checkedValue 为空即将checkedValue全部置为false,
            }
    
      }

    样式的调整:

    // 样式可根据自己的需要,通过控制外层div自行配置,
    .box{
    /*display: flex;*/
    /*justify-content: start;*/
    /*align-items: center;*/
    }
    .labelName{
    25%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    }
    /*------新-----*/
      input[type=checkbox] {
         20px;                  // 可根据自己的需要进行配置input的大小。
        height: 20px;
        border-radius: 10px;
        -webkit-appearance: none;
        background-color: transparent;
        border: 0;
        outline: 0 !important;
        color: #d8d8d8;
        position: relative;
      }
      input[type=checkbox]:before{
        content: "";
        display:block;
         20px;
        height: 20px;
        border-radius: 10px;
        border: 1px solid #ddd;
        background-color: #fff;
        box-sizing:border-box;
        position: absolute;
      }
    
      input[type=checkbox]:disabled:before{
        content: "";
        display:block;
         20px;
        height: 20px;
        border-radius: 10px;
        border: 1px solid #333;
        background-color: #333;
        box-sizing:border-box;                     // 可控制调整背景色。
        position: absolute;
      }
      input[type=checkbox]:checked:before{
        content: "";
        display:block;
         20px;
        height: 20px;
        border-radius: 10px;
        border: 1px solid #D2A47E;
        background-color: #D2A47E;                 //可控制checked背景色
        box-sizing:border-box;
        position: absolute;
      }
      input[type=checkbox]:checked:after{
        content: "";
        display:block;
        /* .15rem;*/
        /*height: .3rem;*/
        /*border-radius:  .06rem;*/
         7px;                          // 此处是控制获取checked=true 后的颜色,请注意宽高比约1:2 。 原理是通过伪类去控制样式。
        height: 15px;
        /*border-radius:3px;*/
        border-left: .07rem solid #fff;
        border-top: .07rem solid #fff;
        box-sizing:border-box;
        position: absolute;
        transform: rotate(-135deg) translate(-70%, 25%);
      }
  • 相关阅读:
    poj3669 广搜
    检索所有课程都选修的的学生的学号与姓名
    UVA10160 Servicing Stations
    uva11205 The broken pedometer 子集生成
    poj1101 the game 广搜
    poj3009 Curling 2.0 深搜
    poj 1564 Sum It Up 搜索
    HDU 2268 How To Use The Car (数学题)
    codeforces 467C George and Job(简单dp,看了题解抄一遍)
    HDU 2267 How Many People Can Survive(广搜,简单)
  • 原文地址:https://www.cnblogs.com/panax/p/10985188.html
Copyright © 2011-2022 走看看