VantUI中单选和多选修改为按钮样式

最新推荐文章于 2023-08-01 11:07:16 发布

chujian0325

最新推荐文章于 2023-08-01 11:07:16 发布

阅读量2.6k

点赞数 2

分类专栏： VantUI 文章标签： css

本文链接：https://blog.csdn.net/chujian0325/article/details/122067231

版权

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>
        </tem