uniapp checkbox按钮

在 UniApp 中，`checkbox` 是一个常用的表单组件，用于实现多选功能。以下是关于 `checkbox` 的使用教程、实现方法、样式设置以及点击事件的详细说明。 ### 基本用法 在 UniApp 中，`<checkbox>` 组件支持基础的复选框功能。以下是一个简单的示例： ```html <template> <view> <checkbox-group @change="checkboxChange"> <label v-for="(item, index) in checkboxList" :key="index"> <checkbox :value="item.value" :checked="item.checked" /> {{ item.label }} </label> </checkbox-group> </view> </template> <script> export default { data() { return { checkboxList: [ { label: "选项1", value: "1", checked: false }, { label: "选项2", value: "2", checked: true }, { label: "选项3", value: "3", checked: false }, ], }; }, methods: { checkboxChange(e) { const values = e.detail.value; this.checkboxList.forEach((item) => { item.checked = values.includes(item.value); }); }, }, }; </script> ``` ### 样式设置 UniApp 提供了默认的样式，但可以通过自定义 CSS 来修改复选框的外观。例如，可以调整复选框的大小、背景颜色和边框等属性。 #### 自定义复选框样式 ```scss <style lang="scss"> // 自定义复选框的样式 checkbox.mycheck .wx-checkbox-input, checkbox.mycheck .uni-checkbox-input { width: 30rpx !important; height: 30rpx !important; background-color: #eeeeee !important; border-radius: 5px !important; border: solid 1px #cccccc !important; } // 选中后的对勾样式 checkbox.mycheck .uni-checkbox-input-checked::before, checkbox.mycheck .wx-checkbox-input-checked::before { font-size: 36rpx !important; } </style> ``` #### 在页面标签中添加自定义类名 ```html <checkbox class="mycheck" :checked="true" /> ``` ### 点击事件 点击 `checkbox` 触发的事件通常绑定在 `<checkbox-group>` 上。当用户选择或取消选择某个选项时，会触发 `@change` 事件，并通过 `e.detail.value` 获取当前选中的值。 ```javascript methods: { checkboxChange(e) { const values = e.detail.value; this.checkboxList.forEach((item) => { item.checked = values.includes(item.value); }); }, } ``` ### 多选与单选的支持 如果需要支持更复杂的多选或单选逻辑，可以封装一个自定义组件。例如，以下是一个支持多选和单选的 `CheckBox` 组件示例： ```html <template> <view> <CheckBox v-model="value2" :list="options2" is-plain :column-num="2" /> </view> </template> <script> import CheckBox from "@/components/CheckBox.vue"; export default { components: { CheckBox, }, data() { return { value2: null, options2: [ { label: "不限", value: null }, { label: "1年以下", value: "0,1" }, { label: "1-3年", value: "1,3" }, { label: "4-7年", value: "4,7" }, { label: "8-10年", value: "8,10" }, { label: "10-15年", value: "10,15" }, ], }; }, }; </script> ``` ### 封装自定义组件 为了提高代码的复用性，可以将 `checkbox` 封装为一个独立的组件。例如，在 `CheckBox.vue` 文件中实现如下逻辑： ```html <template> <view class="checkbox-group"> <view v-for="(item, index) in list" :key="index" class="checkbox-item"> <checkbox :value="item.value" :checked="item.checked" @click="handleCheck(item)" /> <text>{{ item.label }}</text> </view> </view> </template> <script> export default { props: { list: { type: Array, required: true, }, columnNum: { type: Number, default: 1, }, isPlain: { type: Boolean, default: false, }, }, model: { prop: "selectedValue", event: "change", }, data() { return { selectedValue: "", }; }, methods: { handleCheck(item) { if (this.isPlain) { this.selectedValue = item.value; } else { // 多选逻辑 item.checked = !item.checked; const selectedValues = this.list .filter((i) => i.checked) .map((i) => i.value); this.$emit("change", selectedValues); } }, }, }; </script> ``` ###