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、扩大单选按钮可点击范围——伪类得运用
Logo

前往低代码交流专区

更多推荐