vant checkbox 复选框样式改写

我的账号昵称

已于 2024-03-28 10:02:41 修改

阅读量622

点赞数 3

文章标签：前端

于 2024-03-28 09:33:41 首次发布

本文链接：https://blog.csdn.net/weixin_42112342/article/details/137098834

版权

修改前

修改后

基于

vant： 4.8.3

unocss: 0.53.4

<van-checkbox-group v-model="query.zczb" shape="square"  class="text-16 w-100% flex flex-wrap">
  <template v-for="item in registerCapitalOption">
    <van-checkbox :name="item.mkz" class="mr-8 mt-5 w-45% flex flex-type  justify-center rounded-8">
      <template #icon="props"><div class="w-0"></div></template>
      <template #default="props" >
        <div class="border-1 border-solid" :class="props.checked ? 'text-[#006CFFFF]  border-[#006cff] bg-[#E6F4FF]' : 'bg-[#F5F7FBFF] border-[#F5F7FBFF] text-[#000000D9]' " >{{ item.mkz }}</div>
      </template>
    </van-checkbox>
  </template>
</van-checkbox-group>

样式

<style lang='scss' scoped>
.flex-type {
  :deep(.van-checkbox__label) {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  :deep(.van-checkbox__label > div) {
    width: 100%;
    display: flex;
    justify-content: center;
    border-radius: 8px;
    padding: 10px 0;
  }
}
</style>