radio.uvue

<template>
    <view>
        <page-head :title="title"></page-head>
        <view class="uni-padding-wrap">
            <view class="uni-title uni-common-mt">
                <text class="uni-title-text">
                    默认样式
                </text>
            </view>
            <radio-group class="uni-flex uni-row radio-group" @change="testChange">
                <radio value="r" :checked="checked" :color="color" style="margin-right: 30rpx;" class="radio r">选中
                </radio>
                <radio value="r1" style="margin-right: 30rpx;" class="radio r1">{{text}}</radio>
                <radio value="r2" :disabled="disabled" class="radio r2">禁用</radio>
            </radio-group>
        </view>
        <view class="uni-padding-wrap">
            <view class="uni-title uni-common-mt">
                <text class="uni-title-text">
                    不同颜色和尺寸的radio
                </text>
            </view>
            <radio-group class="uni-flex uni-row radio-group">
                <radio value="r1" :checked="true" color="#FFCC33" style="transform:scale(0.7); margin-right: 30rpx;"
                    class="radio">选中
                </radio>
                <radio value="r2" color="#FFCC33" style="transform:scale(0.7)" class="radio">未选中</radio>
            </radio-group>
        </view>
        <view class="uni-padding-wrap">
            <view class="uni-title uni-common-mt">
                <text class="uni-title-text">
                    推荐展示样式
                </text>
            </view>
        </view>
        <view class="uni-list uni-common-pl">
            <radio-group @change="radioChange" class="radio-group">
                <radio class="uni-list-cell uni-list-cell-pd radio" v-for="(item, index) in items" :key="item.value"
                    :class="index < items.length - 1 ? 'uni-list-cell-line': ''" :value="item.value"
                    :checked="index === current">
                    {{item.name}}
                </radio>
            </radio-group>
        </view>
    </view>
</template>
<script lang="ts">
    type ItemType = {
        value : string,
        name : string,
    }
    export default {
        data() {
            return {
                title: 'radio 单选框',
                items: [{
                    value: 'USA',
                    name: '美国'
                },
                {
                    value: 'CHN',
                    name: '中国'
                },
                {
                    value: 'BRA',
                    name: '巴西'
                },
                {
                    value: 'JPN',
                    name: '日本'
                },
                {
                    value: 'ENG',
                    name: '英国'
                },
                {
                    value: 'FRA',
                    name: '法国'
                },
                ] as ItemType[],
                current: 0,

                value: '',
                text: '未选中',
                disabled: true,
                checked: true,
                color: '#007aff'
            }
        },
        methods: {
            radioChange(e : RadioGroupChangeEvent) {
                for (let i = 0; i < this.items.length; i++) {
                    if (this.items[i].value === e.detail.value) {
                        this.current = i;
                        break;
                    }
                }
            },
            testChange(e : RadioGroupChangeEvent) {
                this.value = e.detail.value
            }
        }
    }
</script>

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