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 value="cb1" :checked="true" style="margin-right: 30rpx;">选中</checkbox>
                    <checkbox value="cb">未选中</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 value="cb1" :checked="true" color="#FFCC33"
                        style="transform:scale(0.7); margin-right: 30rpx;">选中
                    </checkbox>
                    <checkbox value="cb" color="#FFCC33" style="transform:scale(0.7)">未选中</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">
                <view class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value"
                    :class="index < items.length - 1 ? 'uni-list-cell-line': ''">
                    <view>
                        <checkbox :value="item.value" :checked="item.checked">{{item.name}}</checkbox>
                    </view>
                </view>
            </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[]
            }
        },
        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
                    }
                }
            }
        }
    }
</script>

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