uni-app 插件需求 如何在checkgrop里改变check和radio的原有样式 使其宽高缩小

在 uni-app 中，自定义 checkbox 和 radio 的样式通常涉及到修改其默认的 CSS 样式。uni-app 使用了小程序的组件规范，因此我们可以通过自定义样式类来覆盖默认样式。下面是一个示例，展示如何通过自定义样式来缩小 checkbox 和 radio 的宽高。

首先，在页面的 <style> 部分，我们定义自定义样式类：

<style scoped>
/* 自定义checkbox样式 */
.custom-checkbox .uni-checkbox__input {
  width: 16px; /* 设置checkbox的宽度 */
  height: 16px; /* 设置checkbox的高度 */
}

.custom-checkbox .uni-checkbox__inner {
  width: 16px; /* 内嵌元素的宽度 */
  height: 16px; /* 内嵌元素的高度 */
}

/* 自定义radio样式 */
.custom-radio .uni-radio__input {
  width: 16px; /* 设置radio的宽度 */
  height: 16px; /* 设置radio的高度 */
}

.custom-radio .uni-radio__inner {
  width: 16px; /* 内嵌元素的宽度 */
  height: 16px; /* 内嵌元素的高度 */
  border-radius: 50%; /* 圆形radio */
}

.custom-radio .uni-radio__inner::after {
  width: 8px; /* 选中后内嵌元素的宽度 */
  height: 8px; /* 选中后内嵌元素的高度 */
  border-radius: 50%; /* 圆形选中标记 */
}
</style>

然后，在页面的 <template> 部分，我们应用这些自定义样式类到 checkbox 和 radio 组件上：

<template>
  <view>
    <!-- 自定义样式的checkbox -->
    <checkbox-group>
      <label class="custom-checkbox">
        <checkbox value="checkbox1">Checkbox 1</checkbox>
      </label>
      <label class="custom-checkbox">
        <checkbox value="checkbox2">Checkbox 2</checkbox>
      </label>
    </checkbox-group>

    <!-- 自定义样式的radio -->
    <radio-group>
      <label class="custom-radio">
        <radio value="radio1">Radio 1</radio>
      </label>
      <label class="custom-radio">
        <radio value="radio2">Radio 2</radio>
      </label>
    </radio-group>
  </view>
</template>

在这个示例中，我们通过添加 .custom-checkbox 和 .custom-radio 类来覆盖默认的 checkbox 和 radio 样式。我们调整了宽度和高度属性来缩小组件的尺寸。对于 radio，我们还调整了内嵌元素的边框半径和选中标记的大小，以确保选中标记也是圆形的并且按比例缩小。

这种方法利用了 uni-app 的样式隔离特性（通过 scoped 属性），确保自定义样式不会影响到其他页面或组件。