<template>
<zk-theme type="page" :padding="30" showBack navbarTitle="Checkbox复选框">
<!-- 基础用法 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础用法" align="center" />
<view class="demo-content">
<zk-checkbox v-model="checkbox1" :name="1" label="复选框" />
</view>
</zk-theme>
<!-- 禁用状态 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="禁用状态" align="center" />
<view class="demo-content">
<zk-checkbox-group v-model="checkbox2" direction="row">
<zk-checkbox :name="1" label="禁用未选中" disabled />
<zk-checkbox :name="2" label="禁用已选中" disabled />
</zk-checkbox-group>
</view>
</zk-theme>
<!-- 自定义形状 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义形状" align="center" />
<view class="demo-content">
<zk-checkbox-group v-model="checkbox3" direction="row">
<zk-checkbox :name="1" label="方形" shape="square" color="#165DFF" />
<zk-checkbox :name="2" label="圆角" shape="round" color="#00B42A" />
</zk-checkbox-group>
</view>
</zk-theme>
<!-- 自定义颜色 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义颜色" align="center" />
<view class="demo-content">
<zk-checkbox-group v-model="checkbox4" direction="row">
<zk-checkbox :name="1" label="红色" color="#F53F3F" />
<zk-checkbox :name="2" label="绿色" color="#00B42A" />
<zk-checkbox :name="3" label="蓝色" color="#165DFF" />
</zk-checkbox-group>
</view>
</zk-theme>
<!-- 自定义大小 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="自定义大小" align="center" />
<view class="demo-content">
<zk-checkbox-group v-model="checkbox5" direction="row">
<zk-checkbox :name="1" label="大号" :size="44" :labelSize="32" />
<zk-checkbox :name="2" label="正常" :size="36" :labelSize="28" />
<zk-checkbox :name="3" label="小号" :size="28" :labelSize="24" />
</zk-checkbox-group>
</view>
</zk-theme>
<!-- 限制最大可选数 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="限制最大可选数（2个）" align="center" />
<view class="demo-content">
<zk-checkbox-group v-model="checkbox6" :max="2" @overlimit="onOverLimit">
<zk-checkbox :name="1" label="选项1" />
<zk-checkbox :name="2" label="选项2" />
<zk-checkbox :name="3" label="选项3" />
<zk-checkbox :name="4" label="选项4" />
</zk-checkbox-group>
</view>
</zk-theme>
<!-- 文字自定义颜色 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="文字自定义颜色" align="center" />
<view class="demo-content">
<zk-checkbox-group v-model="checked8" direction="row">
<zk-checkbox :name="1" label="选项1" color="#165DFF" textColor="#FF0000" />
<zk-checkbox :name="2" label="选项2" color="#00B42A" textColor="#00B42A" />
<zk-checkbox :name="3" label="选项3" color="#722ED1" textColor="#722ED1" />
</zk-checkbox-group>
</view>
</zk-theme>
<!-- 搭配单元格使用 -->
<zk-theme type="card" :padding="30" :radius="16" margin="0 0 30rpx 0">
<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="搭配单元格使用" align="center" />
<view class="demo-content">
<zk-checkbox-group v-model="checkbox7">
<view class="cell-group">
<view class="cell" v-for="item in cellList" :key="item.name" @click="toggleCell(item.name)">
<zk-text type="primary" :size="28" :text="item.label" />
<zk-checkbox :name="item.name" class="cell__checkbox" readonly />
</view>
</view>
</zk-checkbox-group>
</view>
</zk-theme>
</zk-theme>
</template>
<script>
export default {
data() {
return {
checkbox1: false,
checkbox2: [2],
checkbox3: [],
checkbox4: [],
checkbox5: [],
checkbox6: [],
checkbox7: [],
checked8: [],
cellList: [{
name: 1,
label: '单元格 1'
},
{
name: 2,
label: '单元格 2'
},
{
name: 3,
label: '单元格 3'
},
]
}
},
methods: {
onOverLimit() {
uni.showToast({
title: '最多只能选择2个',
icon: 'none'
})
},
toggleCell(name) {
console.log("name: " + JSON.stringify(name));
const index = this.checkbox7.indexOf(name);
if (index === -1) {
this.checkbox7.push(name);
} else {
this.checkbox7.splice(index, 1);
}
}
}
}
</script>
<style lang="scss">
.demo-content {
flex-direction: column;
}
.cell-group {
border-radius: 8rpx;
overflow: hidden;
flex-direction: column;
}
.cell {
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 28rpx 32rpx;
border-bottom-width: 1rpx;
border-bottom-style: solid;
border-bottom-color: #E5E6EB;
display: flex;
&:last-child {
border-bottom-width: 0;
}
&__checkbox {
margin-left: 16rpx;
}
}
/* #ifdef APP-NVUE */
.demo-content {
width: 662rpx;
}
/* #endif */
</style>