uniapp 修改checkbox

### 修改或自定义 UniApp Checkbox 组件

#### 使用 CSS 类修改样式

为了改变 `checkbox` 的外观，可以利用现有的 HTML 结构并应用特定的 CSS 样式。通过为 `<checkbox>` 添加自定义类名来实现这一点：

<checkbox :checked="agree_check" color="#3889fd" @click="checkboxChange" class="mycheck"></checkbox>

此代码片段展示了如何向原生组件添加额外的类以便于样式化[^1]。

对于 `.mycheck` 这个类的选择器，在项目的全局或局部样式文件中定义具体的视觉属性，例如大小、颜色和其他装饰效果：

.mycheck {
    transform: scale(1.5); /* 放大复选框 */
}

#### 封装自定义 Checkbox 组件

当需求超出简单样式的调整范围时，则可能需要创建一个新的 Vue 组件作为更复杂的解决方案的一部分。下面是一个简单的例子说明怎样构建一个带有状态管理功能的基础版本：

<!-- CusCheckbox.vue -->
<template>
  <label class="custom-checkbox">
    <input type="checkbox"
           :disabled="disabled"
           v-model="internalValue"
           @change="$emit('change', $event.target.checked)">
    <span></span> <!-- 可用于放置图标或其他标记 -->
  </label>
</template>

<script>
export default {
  props: ['isCheck', 'size', 'disabled'],
  computed: {
    internalValue: {
      get() { return this.isCheck },
      set(val) {}
    }
  }
};
</script>

<style scoped lang="scss">
.custom-checkbox input[type='checkbox'] {
  display:none;
}

.custom-checkbox span::before {
  content:'';
  width: ${props => props.size}px; height:${props => props.size}px;
  background-color:white;
  border-radius:2px;
  vertical-align:middle;
  margin-right:.5em;
  text-align:center;
  line-height:${props => props.size}px;
  font-size:.8rem;
  cursor:pointer;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.05), 0 1px rgba(255,255,255,.4);
  transition:.2s all ease-in-out;
  
  &:hover{
    box-shadow: inset 0 1px 3px rgba(0,0,0,.1),
                0 0 8px rgba(82,168,236,.6);
  }

  &[data-checked=true]::after {
    content:"✓";
    color:green;
  }
}
</style>

上述代码实现了基本的功能，并允许传递参数来自定义尺寸和禁用状态等特性[^2]。

#### 集成到项目中的方式

一旦完成了自定义组件的设计工作之后，就可以像这样将其集成到页面布局里去：

<cus-checkbox :isCheck="item.breakfast" size="20" :disabled="!item.startLunch" @change="changeBreakfast(item, index)"></cus-checkbox>

这使得开发者能够轻松地重用这段逻辑而不必每次都重复编写相同的模板结构。

另外一种方法是使用现成插件提供的 CheckBox 组件，它已经内置了一些实用特性和良好的跨平台兼容性。以下是基于某个假定库的一个实例配置：

<CheckBox v-model="value1" :list="options1" :column-num="3"/>

这里的 `v-model` 是双向绑定的数据源；`:list` 属性指定了可供选择项列表；而 `:column-num` 则控制着每行显示多少列选项[^3]。