checkbox.uvue

<template>
    <view>
        <page-head :title="title"></page-head>
        <view class="uni-padding-wrap uni-common-mt">
            <view class="uni-title uni-common-mt">
                <text class="uni-title-text">
                    默认样式
                </text>
            </view>
            <view>
                <checkbox-group class="uni-flex uni-row checkbox-group" @change="testChange">
                    <checkbox value="cb" :checked="checked" :color="color" style="margin-right: 30rpx;"
                        class="checkbox cb">{{text}}</checkbox>
                    <checkbox value="cb1" style="margin-right: 30rpx;" class="checkbox cb1">未选中</checkbox>
                    <checkbox value="cb2" :disabled="disabled" class="checkbox cb2">禁用</checkbox>
                </checkbox-group>
            </view>
            <view class="uni-title uni-common-mt">
                <text class="uni-title-text">
                    不同颜色和尺寸的checkbox
                </text>
            </view>
            <view>
                <checkbox-group class="uni-flex uni-row checkbox-group">
                    <checkbox value="cb1" :checked="true" color="#FFCC33"
                        style="transform:scale(0.7); margin-right: 30rpx;" class="checkbox">选中
                    </checkbox>
                    <checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)" class="checkbox">未选中</checkbox>
                </checkbox-group>
            </view>
        </view>

        <view class="uni-padding-wrap">
            <view class="uni-title uni-common-mt">
                <text class="uni-title-text">
                    推荐展示样式
                </text>
                <text class="uni-subtitle-text">
                    使用 uni-list 布局
                </text>
            </view>
        </view>
        <view class="uni-list">
            <checkbox-group @change="checkboxChange" class="checkbox-group">
                <checkbox class="uni-list-cell uni-list-cell-pd checkbox" v-for="(item, index) in items"
                    :key="item.value" :value="item.value" :checked="item.checked"
                    :class="index < items.length - 1 ? 'uni-list-cell-line': ''">
                    {{item.name}}
                </checkbox>
            </checkbox-group>
        </view>
    </view>
</template>
<script lang="ts">
    type ItemType = {
        value : string,
        name : string,
        checked : boolean
    }
    export default {
        data() {
            return {
                title: 'checkbox 复选框',
                items: [{
                    value: 'USA',
                    name: '美国',
                    checked: false
                },
                {
                    value: 'CHN',
                    name: '中国',
                    checked: true
                },
                {
                    value: 'BRA',
                    name: '巴西',
                    checked: false
                },
                {
                    value: 'JPN',
                    name: '日本',
                    checked: false
                },
                {
                    value: 'ENG',
                    name: '英国',
                    checked: false
                },
                {
                    value: 'FRA',
                    name: '法国',
                    checked: false
                }
                ] as ItemType[],

                text: '选中',
                value: [] as string[],
                disabled: true,
                checked: true,
                color: '#007aff'
            }
        },
        methods: {
            checkboxChange: function (e : CheckboxGroupChangeEvent) {
                var items = this.items,
                    values = e.detail.value;
                for (var i = 0, lenI = items.length; i < lenI; ++i) {
                    const item = items[i]
                    if (values.indexOf(item.value) >= 0) {
                        item.checked = true
                    } else {
                        item.checked = false
                    }
                }
            },
            testChange: function (e : CheckboxGroupChangeEvent) {
                this.value = e.detail.value
            }
        }
    }
</script>

<style>
    .uni-list-cell {
        justify-content: flex-start
    }
</style>