如果您想在 Vue
小程序中使用 `checkbox
-group`，并去掉 checkbox 的边框并自定义
样式，可以使用以下的代码示例：
```html
<template>
<div class="checkbox
-group">
<label v
-for="(option, index) in options" :key="index" class="checkbox
-wrapper">
<input type="checkbox" :value="option.value" v
-model="selectedOptions" class="checkbox">
<span class="label">{{ option.label }}</span>
</label>
</div>
</template>
<style>
.checkbox
-group {
display: flex;
flex
-direction: column;
}
.checkbox
-wrapper {
display: flex;
align
-items: center;
margin
-bottom: 10px;
}
.checkbox {
position: absolute;
opacity: 0;
cursor: pointer;
}
.label {
position: relative;
padding
-left: 30px;
font
-size: 14px;
line
-height: 1.5;
color: #333;
}
.label:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
border: 1px solid #ccc;
box
-sizing: border
-box;
border
-radius: 2px;
}
.checkbox:checked + .label:before {
background
-color: #007aff;
border
-color: #007aff;
}
.checkbox:checked + .label:before:after {
content: "";
position: absolute;
left: 6px;
top: 2px;
width: 5px;
height: 10px;
border: solid white;
border
-width: 0 2px 2px 0;
transform: rotate(45deg);
}
</style>
<script>
export default {
data() {
return {
options: [
{ value: 'option1', label: '选项1' },
{ value: 'option2', label: '选项2' },
{ value: 'option3', label: '选项3' },
],
selectedOptions: [],
}
},
}
</script>
```
在这个示例中，我们使用了 `checkbox
-group` 组件来管理多个 checkbox 的选中状态。我们使用 CSS
样式来自定义 checkbox 的外观，包括去掉边框、自定义背景颜色、自定义选中时的背景颜色等。在每个 checkbox 的 label 中，我们使用了 `before` 伪元素来绘制 checkbox 的外观。同时，我们使用了 Vue 的数据绑定功能来管理 checkbox 的选中状态。
博客内容提及xx.wxss，这可能与前端开发相关，wxss常用于微信小程序样式编写。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
