zoukankan      html  css  js  c++  java
  • jqueryweui关于switch css与js结合

    .invoice_wrapper{
      .comm_con{
        .weui-switch-cp{
          .weui-switch-cp__box{
            height:0.4rem;
            margin:0.25rem 0;
            0.67rem;
          }
          ::after{
            0.35rem;
            height:0.35rem;
            border-radius:50%;
          }
        
        }
        .weui-switch:checked:after, .weui-switch-cp__input:checked ~ .weui-switch-cp__box:after{
            -webkit-transform: translateX(0.25rem);
            transform: translateX(0.25rem);
          }
        .weui-switch:before, .weui-switch-cp__box:before{
          height:0.35rem;
          0.63rem;
        }
      }
    }
    

      

    <!--是否需要发票--> <div class="invoice clear"> <div class="weui-cell__bd">发票:</div> <div class="weui-cell__ft"> <label for="switchCP2" class="weui-switch-cp"> <input id="switchCP2" @click="chooseInv()" value="off" class="weui-switch-cp__input" type="checkbox"> <div class="weui-switch-cp__box"></div> </label> <span v-if="!ifinvoice" >不需要</span> <span v-if="ifinvoice">需要</span> </div> </div>

      

        // 选择是否需要发票
        chooseInv(){
          console.log('chooseAbc')
          if($('#switchCP2').val()=='off'){
            $('#switchCP2').val('on')
            this.ifinvoice = true;
          }else{
            $('#switchCP2').val('off')
            this.ifinvoice = false;
          }
        },
    

      主要是input 的输入上绑定一个value="off".用点击事件来控制其值为off或on。然后控制其颜色 和文字

  • 相关阅读:
    你不知道的JS系列上( 40 ) - 什么是类
    CF356E
    [HDU4135]CO Prime(容斥)
    [POJ 2888]Magic Bracelet[Polya Burnside 置换 矩阵]
    Polya定理与Burnside引理
    选举
    David与Vincent的博弈游戏[树型DP]
    Vincent的城堡
    三元组
    vue打包体积优化之旅
  • 原文地址:https://www.cnblogs.com/peko/p/9962546.html
Copyright © 2011-2022 走看看