VUE下纯css实现checkbox

最新推荐文章于 2024-04-28 18:07:41 发布

原创最新推荐文章于 2024-04-28 18:07:41 发布 · 315 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了一种在Vue中实现自定义Checkbox组组件的方法，包括HTML结构、数据绑定及CSS样式，适用于快速创建可复用的Checkbox选择界面。

在网上找了半天很多都不是很全，这玩意虽然不难，但是自己写也很麻烦，我整了个全的效果如下：

下面上代码：

<template>中代码如下：

            <div class="checkbox-btn-group">
            <div class="checkbox">
              <label for="seCh0">
                <input type="checkbox" id="seCh0" name="selfCheck" value="seCh0" v-model="selfCheck"  />
                <span :class="showBtn?'enable-checkbox-style':'disable-checkbox-style'">苹果</span>
              </label>
            </div>
            <div class="checkbox">
              <label for="seCh1">
                <input type="checkbox" id="seCh1" name="selfCheck" value="seCh1" v-model="selfCheck"  />
                <span :class="showBtn?'enable-checkbox-style':'disable-checkbox-style'">橘子</span>
              </label>
            </div>
            <div class="checkbox">
              <label for="seCh2">
                <input type="checkbox" id="seCh2" name="selfCheck" value="seCh2" v-model="selfCheck"  />
                <span :class="showBtn?'enable-checkbox-style':'disable-checkbox-style'">香蕉</span>
              </label>
            </div>
            <div class="checkbox">
              <label for="seCh4">
                <input type="checkbox" id="seCh4" name="selfCheck" value="seCh4" v-model="selfCheck"  />
                <span :class="showBtn?'enable-checkbox-style':'disable-checkbox-style'">牛奶</span>
              </label>
            </div>
          </div>

data中一定要设置默认值：

data(){
    return{selfCheck:['seCh1'],}
}

css如下：

.checkbox-btn-group {
          width: 100%;
          .checkbox {
            word-wrap: break-word;
            word-break: normal;
            height: auto;
            padding: 10px 0;
            text-align: left;
            // height: 17px;
            line-height: 17px;
            font-size: 13px;
            color: rgba(51,51,51,1);
            display: flex;
            align-items: center;
            input[type="checkbox"] {
              width: 0;
              height: 0;
              opacity: 0;
            }
            span::before {
              content: "";
              display: inline-block;
              width: 14px;
              height: 14px;
              // border-radius: 50%;
              border: 1px solid rgba(190,190,190,1);
              box-sizing: border-box;
              margin-right: 6px;
              position: relative;
              top: 2px;
            }
            input[type="checkbox"]:checked + .enable-checkbox-style::before {
              padding: 2px;
              background-color: rgba(68,83,152,1);
              background-clip: content-box;
              border-color: rgba(68,83,152,1);
            }
            input[type="checkbox"]:checked + .disable-checkbox-style::before {
              padding: 2px;
              background-color: rgba(153,153,153,1);
              background-clip: content-box;
              border-color: rgba(153,153,153,1);
            }
            .other {
              width: 190px;
              height: 24px;
              border-radius: 2px;
              border: 1px solid rgba(68,83,152,1);
              font-size: 13px;
              margin: 0 0 0 8px;
            }
          }
        }
      }

radio就不赘述了，把type换成radio，默认值改成一个string类型就可以了。

很简单，但是有现成可以抄的还是比较爽的，哈哈哈