You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
329 lines
7.7 KiB
329 lines
7.7 KiB
<template>
|
|
<view class="u-page">
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">基本案例</text>
|
|
<text class="u-block__title">苹果、香蕉和橙子哪个最甜？</text>
|
|
<view class="u-demo-block__content">
|
|
<view class="u-page__checkbox-item">
|
|
<u-checkbox-group
|
|
v-model="checkboxValue1"
|
|
placement="column"
|
|
@change="checkboxChange"
|
|
>
|
|
<u-checkbox
|
|
:customStyle="{marginBottom: '8px'}"
|
|
v-for="(item, index) in checkboxList1"
|
|
:key="index"
|
|
:label="item.name"
|
|
:name="item.name"
|
|
>
|
|
</u-checkbox>
|
|
</u-checkbox-group>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">自定义形状</text>
|
|
<text class="u-block__title">中国四大名著是？</text>
|
|
<view class="u-demo-block__content">
|
|
<view class="u-page__checkbox-item">
|
|
<u-checkbox-group
|
|
v-model="checkboxValue2"
|
|
placement="column"
|
|
@change="checkboxChange"
|
|
shape="square"
|
|
>
|
|
<u-checkbox
|
|
:customStyle="{marginBottom: '8px'}"
|
|
v-for="(item, index) in checkboxList2"
|
|
:key="index"
|
|
:label="item.name"
|
|
:name="item.name"
|
|
>
|
|
</u-checkbox>
|
|
</u-checkbox-group>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">是否禁用</text>
|
|
<text class="u-block__title">下面什么东西不能吃？</text>
|
|
<view class="u-demo-block__content">
|
|
<view class="u-page__checkbox-item">
|
|
<u-checkbox-group
|
|
v-model="checkboxValue3"
|
|
placement="column"
|
|
@change="checkboxChange"
|
|
>
|
|
<u-checkbox
|
|
:customStyle="{marginBottom: '8px'}"
|
|
v-for="(item, index) in checkboxList3"
|
|
:key="index"
|
|
:label="item.name"
|
|
:name="item.name"
|
|
:disabled="index===0"
|
|
>
|
|
</u-checkbox>
|
|
</u-checkbox-group>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">是否禁止点击提示语选中复选框</text>
|
|
<text class="u-block__title">北宋四大家是谁？</text>
|
|
<view class="u-demo-block__content">
|
|
<view class="u-page__checkbox-item">
|
|
<u-checkbox-group
|
|
v-model="checkboxValue4"
|
|
placement="column"
|
|
@change="checkboxChange"
|
|
:labelDisabled="true"
|
|
>
|
|
<u-checkbox
|
|
:customStyle="{marginBottom: '8px'}"
|
|
v-for="(item, index) in checkboxList4"
|
|
:key="index"
|
|
:label="item.name"
|
|
:name="item.name"
|
|
>
|
|
</u-checkbox>
|
|
</u-checkbox-group>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">自定义颜色</text>
|
|
<text class="u-block__title">哪个颜色最好看？</text>
|
|
<view class="u-demo-block__content">
|
|
<view class="u-page__checkbox-item">
|
|
<u-checkbox-group
|
|
v-model="checkboxValue5"
|
|
placement="column"
|
|
@change="checkboxChange"
|
|
activeColor="#19be6b"
|
|
>
|
|
<u-checkbox
|
|
:customStyle="{marginBottom: '8px'}"
|
|
v-for="(item, index) in checkboxList5"
|
|
:key="index"
|
|
:label="item.name"
|
|
:name="item.name"
|
|
>
|
|
</u-checkbox>
|
|
</u-checkbox-group>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">横向排列形式</text>
|
|
<text class="u-block__title">什么东西不能飞？</text>
|
|
<view class="u-demo-block__content">
|
|
<view class="u-page__checkbox-item">
|
|
<u-checkbox-group
|
|
v-model="checkboxValue6"
|
|
@change="checkboxChange"
|
|
>
|
|
<u-checkbox
|
|
:customStyle="{marginRight: '16px'}"
|
|
v-for="(item, index) in checkboxList6"
|
|
:key="index"
|
|
:label="item.name"
|
|
:name="item.name"
|
|
>
|
|
</u-checkbox>
|
|
</u-checkbox-group>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="u-demo-block">
|
|
<text class="u-demo-block__title">横向两端排列形式</text>
|
|
<text class="u-block__title">什么东西不能吃？</text>
|
|
<view>
|
|
<view class="u-page__checkbox-item">
|
|
<u-checkbox-group
|
|
v-model="checkboxValue7"
|
|
@change="checkboxChange"
|
|
:borderBottom="true"
|
|
placement="column"
|
|
iconPlacement="right"
|
|
>
|
|
<u-checkbox
|
|
:customStyle="{marginBottom: '16px'}"
|
|
v-for="(item, index) in checkboxList7"
|
|
:key="index"
|
|
:label="item.name"
|
|
:name="item.name"
|
|
>
|
|
</u-checkbox>
|
|
</u-checkbox-group>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 基本案列数据
|
|
checkboxList1: [{
|
|
name: '苹果',
|
|
disabled: false
|
|
},
|
|
{
|
|
name: '香蕉',
|
|
disabled: false
|
|
},
|
|
{
|
|
name: '橙子',
|
|
disabled: false
|
|
}
|
|
],
|
|
// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
|
|
checkboxValue1: ['苹果', '橙子'],
|
|
|
|
// 自定义形状数据
|
|
checkboxList2: [{
|
|
name: '西游记',
|
|
disabled: false
|
|
},
|
|
{
|
|
name: '红楼梦',
|
|
disabled: false
|
|
},
|
|
{
|
|
name: '三国演义',
|
|
disabled: false
|
|
},
|
|
{
|
|
name: '水浒传',
|
|
disabled: false
|
|
}
|
|
],
|
|
// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
|
|
checkboxValue2: ['西游记', '红楼梦', '三国演义', '水浒传'],
|
|
|
|
// 是否禁用数据
|
|
checkboxList3: [{
|
|
name: '冬瓜',
|
|
disabled: false
|
|
},
|
|
{
|
|
name: '西瓜',
|
|
disabled: false
|
|
},
|
|
{
|
|
name: '黄瓜',
|
|
disabled: false
|
|
},
|
|
{
|
|
name: '傻瓜',
|
|
disabled: false
|
|
}
|
|
],
|
|
// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
|
|
checkboxValue3: ['傻瓜'],
|
|
|
|
// 是否禁止点击提示语选中复选框数据
|
|
checkboxList4: [{
|
|
name: '黄庭坚',
|
|
disabled: false
|
|
},
|
|
{
|
|
name: '欧阳修',
|
|
disabled: false
|
|
},
|
|
{
|
|
name: '苏小宝',
|
|
disabled: false
|
|
},
|
|
{
|
|
name: '王安石',
|
|
disabled: false
|
|
}
|
|
],
|
|
// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
|
|
checkboxValue4: ['黄庭坚', '欧阳修', '王安石'],
|
|
|
|
//自定义颜色数据
|
|
checkboxList5: [{
|
|
name: '红色',
|
|
disabled: false
|
|
},
|
|
{
|
|
name: '黄色',
|
|
disabled: false
|
|
},
|
|
{
|
|
name: '绿色',
|
|
disabled: false
|
|
},
|
|
{
|
|
name: '蓝色',
|
|
disabled: false
|
|
}
|
|
],
|
|
// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
|
|
checkboxValue5: ['绿色'],
|
|
|
|
//横向排列形式数据
|
|
checkboxList6: [{
|
|
name: '小鸟',
|
|
disabled: false
|
|
},
|
|
{
|
|
name: '游艇',
|
|
disabled: false
|
|
},
|
|
{
|
|
name: '轮船',
|
|
disabled: false
|
|
},
|
|
{
|
|
name: '飞机',
|
|
disabled: false
|
|
}
|
|
],
|
|
// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
|
|
checkboxValue6: ['游艇', '轮船'],
|
|
|
|
//横向两端排列形式
|
|
checkboxList7: [{
|
|
name: '汽车',
|
|
disabled: false
|
|
},
|
|
{
|
|
name: '蒸汽机',
|
|
disabled: false
|
|
},
|
|
{
|
|
name: '猪肉',
|
|
disabled: false
|
|
},
|
|
{
|
|
name: '抄手',
|
|
disabled: false
|
|
}
|
|
],
|
|
// u-checkbox-group的v-model绑定的值如果设置为某个checkbox的name，就会被默认选中
|
|
checkboxValue7: ['汽车', '蒸汽机'],
|
|
}
|
|
|
|
},
|
|
watch: {
|
|
checkboxValue1(newValue, oldValue) {
|
|
// console.log('v-model', newValue);
|
|
}
|
|
},
|
|
methods: {
|
|
checkboxChange(n) {
|
|
// console.log('change', n);
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.u-page {}
|
|
</style>
|
|
|