博客

VantUI不像ElementUI，单选和多选有按钮样式，设置type=”button”就好了，在VantUI中我们研究发现，单选和多选设置选中时，只有前面的图标改为了选中状态而文字没有改变，我们可以利用van-radio和van-checkbox的自定义图标功能，将单选和多选改为按钮样式

以单选为例：

HTML：

<van-field name="radio" :rules="rules" :error-message="rules.message">
  <template #input>
    <van-radio-group v-model="radio">
      <van-radio v-for="(item,index) in data.items" :key="index" :name="item.itemValue" style="margin-bottom:12px;">
        <template #icon="props">
          <van-button size="small" round v-if="props.checked" color="#C3070s">{{item.itemText}}</van-button>
          <van-button size="small" round v-else>{{item.itemText}}</van-button>
        </template>
      </van-radio>
    </van-radio-group>
  </template>
</van-field>

CSS：

/deep/ .van-radio__icon {
  height: 100% !important;
}
/deep/ .van-button--small {
  padding: 0 15px !important
}

单选预览样式为：