前端纯css实现-一个复选框交互展示效果

纯手工写一个复选框前端交互，这样可以自由定制自己想要展示的字段和设计风格 写这篇文章主要是抛砖引玉，可能存在槽点，大家多多担待！

1.交互效果展示

用码上掘金在线简单的写了一下:

2.简要说明

$primary-color:#1e80ff; // 主题色-掘金蓝

$primary-disable: #7ab0fd; // 只读或禁用色

可以根据实际需求更改主题色，这里的禁用变量色忘记使用了，sorry！！!

3.布局代码部分

  <!-- page start -->
  <div class="ui-layout-page">
    <h1>请选择关注类型</h1>
    <div class="ui-checkbox">
      <!-- 复选框 item start -->
      <div 
        :class="{'ui-item-box':true,'ui-item-check': i.isCheck,'ui-item-disable':i.disable}" 
        v-for="(i,index) in list" 
        :key="index"
        @click="doCheck(i)">
        <img :src="i.icon"/>
        <span class="span-bar">
          <p class="label-bar">{{i.label}}</p>
          <p class="desc-bar">{{i.desc}}</p>
        </span>
        <!-- 选中标识 start -->
        <span 
          v-if="i.isCheck" 
          class="icon-check">
        </span>
        <!-- 选中标识 end -->
      </div>
      <!-- 复选框 item end -->
    </div>
    <p style="font-size:12px;color:#333">当前选择ids：{{ this.checked.join(',') }}</p>
  </div>
  <!-- page end -->

4.方法和数据结构部分

      checked:['1','2'], 
      list:[
        {
          label:'JYM系统消息',
          id:'1',
          desc:'关注掘金系统消息',
          isCheck:true,
          icon:'https://gd-hbimg.huaban.com/6f3e3ff111c6c98be6785d9eddd5b13f8979ef9d1719e-Xwo8QB_fw658webp', 
          disable:true,
        },{
          label:'JYM后端',
          id:'2',
          isCheck:true,
          desc:'关注后端讨论区新消息',
          icon:'https://gd-hbimg.huaban.com/e2622fe339d655bd17de59fed3b0ae0afb9a16c31db25-YNpnGV_fw658webp', 
          disable:false,
        },{
          label:'JYM前端',
          id:'3',
          isCheck:false,
          desc:'关注前端讨论区新消息',
          icon:'https://gd-hbimg.huaban.com/80765200aa4ffb7683ddea51c3063b0801874fb86324-3OVCQN_fw1200', 
          disable:false,
        },{
          label:'JYM开发工具',
          id:'4',
          isCheck:false,
          desc:'关注开发工具讨论区新消息',
          icon:'https://gd-hbimg.huaban.com/ef1c0e1fb2eae73d674aae791526a331b45b26d2b78e-r4p1aq_fw1200', 
          disable:false,
        }
      ]
      
    /**
     * 复选点击事件 
     * el.disable 禁用状态
     * */ 
    doCheck(el){
      if(el.disable) return   
      if(this.checked.includes(el.id)){ 
        el.isCheck = false
        this.checked=this.checked.filter(item => item !== el.id);
      } else{
        el.isCheck = true
        this.checked.push(el.id)
      }
      this.checked.join(',')
    }

5.样式控制部分

.ui-layout-page{ 
  padding:20px; 
  h1{
    font-size:16px; 
  }

  // 个性化复选框 css start -------------
  .ui-checkbox{
    width:100%;

    $primary-color:#1e80ff; // 主题色-掘金蓝
    $primary-disable: #7ab0fd; // 只读或禁用色

    // 选中状态css
    .ui-item-check{
      border:1px solid $primary-color !important;
      background:rgba($primary-color,0.05) !important;
    }

    // 禁用状态css
    .ui-item-disable{
      border:1px solid #d3d3d3 !important;
      background: #f3f3f3 !important;
      cursor:not-allowed !important;
      .icon-check{
        border-top:20px solid #ccc !important;
      }
      .label-bar{
        color:#777 !important;
      }
      .desc-bar{ 
        color:#a3a3a3 !important;
      }
    }

    // 常规状态css
    .ui-item-box{
      position:relative;
      display:inline-flex;
      align-items: center;
      width:220px;
      height:70px;
      border:1px solid #ccc;
      cursor: pointer; 
      margin:0px 8px 8px 0px;
      border-radius:4px; 
      overflow:hidden;

      &:hover{ 
        border:1px solid $primary-color;
        background:rgba($primary-color,0.05);
      }

      img{
        width:38px;
        height:38px;
        margin-left:15px;
      }
      p{
        margin:0px;
      }
      .span-bar{
        width:0px;
        flex:1 0 auto;
        padding:0px 10px;
        
        .label-bar{
          font-size:14px;
          font-weight:700;  
          margin-bottom:4px;
          color:#333;
        }
        .desc-bar{
          font-size:12px;
          color:#999;
        }
      }
      // 绘制圆角斜三角形
      .icon-check{
        position:absolute;
        width:0px;
        height:0px;
        top:2px;
        right:2px; 
        border-top:20px solid $primary-color;
        border-left:25px solid transparent; 
        border-radius: 5px 3px 5px 0px;
        &:after{
          content:'✓';
          position: relative;
          color:#fff;
          font-size:12px;
          left: -12px;
          top: -26px; 
        }
      }
    }
  }
  // 个性化复选框 css end -------------
}