vant+vue（自定义单选、复选按钮图标以及扩大单选按钮范围）

vant+vue（自定义单选、复选按钮图标以及扩大单选按钮范围）

主要记录vant和vue使用过程中遇见的问题以及解决方案

---

---

前言

有些时候我们想自己定义单选按钮图标，以及扩大单选按钮的范围，例如在制作九宫格的时候，那么下面我们来讲讲怎样自定义按钮图标，本文章基于vant和vue来写

---

一、单选按钮图标自定义？

单选和复选类似，我这里以单选为例子，最后再说复选怎么做。

二、第一步

我想大家都知道，单选和复选其实是有图标的，我们在此处只需要用插槽将其替换就可以了，话不多说，直接上代码：

1.html部分

代码如下（示例）：

 <!-- 九宫格、一行三格、无边框、正方形 -->
      <van-grid gutter="0.11rem"
                column-num="3"
                :border="false"
                square>
        <!-- for循环 -->
        <van-grid-item use-slot
                       text="文字"
                       v-for="(i,index) in cardList"
                       :key="index">
          <!-- 引入单选组件，选择结果为radio -->
          <van-radio-group v-model="radio"
                           class="cardBorder">
            <div class="select">
              <!-- 选择结果为i.code -->
              <van-radio :name="i.code"
                         id="radio">
                <!-- 用template插槽自定义图标 -->
                <template #icon="props">
                  <!-- checked是单选按钮自带属性，值为true和false -->
                  <!-- activeIcon:选择图标、inactiveIcon:未选择图标 -->
                  <img class="img_icon"
                       :src="props.checked ? activeIcon : inactiveIcon" />
                </template>
              </van-radio>
            </div>
            <div class="content_div">
              <img style="width: 2.1rem;"
                   :src="i.src" />
              <span class="fontBackground font_13 te_center color_fff ">{{i.name}}</span>
            </div>
          </van-radio-group>
        </van-grid-item>
      </van-grid>

2.data引入自定义图标

这里我的未选图标是透明色的，图片png格式：
代码如下（示例）：

    return {
 		radio: '',
      // 引入图标
      activeIcon: require('@/assets/img/setting/birthdaAndCard/selected.png'),
      inactiveIcon: require('@/assets/img/setting/birthdaAndCard/unSelected.png'),  }
}

3.扩大单选按钮可点击范围

这里运用伪类before来扩大范围，伪类的好处是不改变原有样式，正符合我们这里的要求，主要就是用padding扩大范围，一下是css，我这里在html中定义了id:radio,以便找到该单选按钮：
代码如下（示例）：

        #radio::before {
  width: 0.44rem;
  height: 0.36rem;
  content: '';
    /* 下图红色区域就是我扩大的范围 */
  background: orangered;
  /* 加宽高使得和图片一样大小 */
  padding: 43px;
  position: absolute;
  top: 0px;
  right: 0px;
}

红色区域就是扩大的范围：

最后的结果就是这样了：

再来说复选框，复选框要改变样式，只需要将对应得单选van-radio-group标签van-checkbox-group标签，van-radio标签变成van-checkbox就可以了。

---

总结

1、vant宫格得用法 2、单选、复选按钮自定义图标 3、扩大单选按钮可点击范围——伪类得运用