vant 将复选框修改为按钮样式

修改后的样式

 vant 官网样例

<van-field name="checkbox" label="复选框">
  <template #input>
    <van-checkbox v-model="checkbox" shape="square" />
  </template>
</van-field>
<van-field name="checkboxGroup" label="复选框组">
  <template #input>
    <van-checkbox-group v-model="checkboxGroup" direction="horizontal">
      <van-checkbox name="1" shape="square">复选框 1</van-checkbox>
      <van-checkbox name="2" shape="square">复选框 2</van-checkbox>
    </van-checkbox-group>
  </template>
</van-field>


export default {
  data() {
    return {
      checkbox: false,
      checkboxGroup: [],
    };
  },
};

vant 复选框只能修改图标的样式，将图标修改为button按钮即可

修改后代码

<van-field name="checkboxGroup" label="" class="checkstyle">
   <template #input>
      <van-checkbox-group v-model="Filtercriteria.checkboxGroup" direction="horizontal">
         <van-checkbox shape="square"  name="专户" style="margin-bottom:12px;">
            <template #icon="props">
               <van-button size="small" plain hairline round v-if="props.checked" color="red">专户</van-button>
               <van-button size="small" plain hairline round v-else>专户</van-button>
             </template>
         </van-checkbox>
         <van-checkbox shape="square"  name="货币" style="margin-bottom:12px;">
            <template #icon="props">
               <van-button size="small" plain hairline round v-if="props.checked" color="red">货币</van-button>
               <van-button size="small" plain hairline round v-else>货币</van-button>
             </template>
          </van-checkbox>
          <van-checkbox shape="square"  name="公墓" style="margin-bottom:12px;">
             <template #icon="props">
                <van-button size="small" plain hairline round v-if="props.checked" color="red">公墓</van-button>
                <van-button size="small" plain hairline round v-else>公墓</van-button>
              </template>
           </van-checkbox>
       </van-checkbox-group>
   </template>
</van-field>
<!-- <van-field name="checkboxGroup" label="" class="checkstyle">
        <template #input>
           <van-checkbox-group v-model="checkboxGroup" direction="horizontal">
              <van-checkbox shape="square" v-for="(item,index) in combinationtype" :key="index" :name="item.name" style="margin-bottom:12px;">
                 <template #icon="props">
                    <van-button size="small" plain hairline round v-if="props.checked" color="red">{{item.name}}</van-button>
                    <van-button size="small" plain hairline round v-else>{{item.name}}</van-button>
                 </template>
              </van-checkbox>
           </van-checkbox-group>
        </template>
     </van-field> -->


<style lang='less'>
.checkstyle{
  /deep/.van-checkbox__icon{
    height: 100%;
  }
}
</style>

单选框变按钮样式同理

<van-field name="radio">
   <template #input>
      <van-radio-group v-model="Filtercriteria.radio">
         <van-radio  name="专户" style="margin-bottom:12px;">
            <template #icon="props">
               <van-button size="small" plain hairline round  v-if="props.checked" color="red">专户</van-button>
               <van-button size="small" plain hairline round  v-else>专户</van-button>
             </template>
           </van-radio>
           <van-radio  name="货币" style="margin-bottom:12px;">
              <template #icon="props">
                 <van-button size="small" plain hairline round  v-if="props.checked" color="red">货币</van-button>
                 <van-button size="small" plain hairline round  v-else>货币</van-button>
               </template>
            </van-radio>
         </van-radio-group>
     </template>
  </van-field>

<style lang='less'>
/deep/ .van-radio__icon {
  height: 100% ;
}
</style>