李欣琪

checkbox 复选按钮

该组件采用的是原生+Class方式

平台兼容性

AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序
√√√√√√√

示例代码

默认使用

 <checkbox-group>
   <label>
     <checkbox checked="true"></checkbox>
     复选按钮
   </label>
 </checkbox-group>

设置大小

 <checkbox-group>
   <label>
     <checkbox checked="true" style="transform:scale(0.7)"></checkbox>
     复选按钮
   </label>
 </checkbox-group>

round样式

 <checkbox-group>
   <label>
     <checkbox class="n-round" checked="true" style="transform:scale(0.7)"></checkbox>
     复选按钮
   </label>
 </checkbox-group>

设置颜色

默认各平台的定义的颜色 若通过css实现，自有属性color则无效

通过radio自有属性color实现

<template>
  <label>
   <radio class="n-dot" color="red"/>单选按钮
 </label>
</template>

通过全局主题样式实现

<template>
  <label>
    <radio class="n-dot"/>单选按钮
  </label>
</template>
<style lang="scss" scoped>
//必须要有v-deep
.page::v-deep {
  radio.n-dot::after {
    background-color: $n-primary !important;
  }

  radio.n-dot[checked] .wx-radio-input,
  radio.n-dot.checked .uni-radio-input {
    background-color: $n-primary !important;
    border-color: $n-primary !important;
  }
}
</style>