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" style="flex-wrap: wrap;">
                <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 value="r3" class="radio r3" style="margin-top: 20rpx;">{{wrapText}}</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: 'CHN',
                        name: '中国'
                    },
                    {
                        value: 'USA',
                        name: '美国'
                    },

                    {
                        value: 'BRA',
                        name: '巴西'
                    },
                    {
                        value: 'JPN',
                        name: '日本'
                    },
                    {
                        value: 'ENG',
                        name: '英国'
                    },
                    {
                        value: 'FRA',
                        name: '法国'
                    },
                ] as ItemType[],
                current: 0,

                value: '',
                text: '未选中',
                wrapText: 'uni-app x，终极跨平台方案\nuts，大一统语言',
                disabled: true,
                checked: true,
                color: '#007aff'
            }
        },
        methods: {
            radioChange(e : RadioGroupChangeEvent) {
                const selected = this.items.find((item) : boolean => {
                    return item.value == e.detail.value
                })
                uni.showToast({
                    icon: 'none',
                    title: '当前选中:' + selected?.name
                })
            },
            testChange(e : RadioGroupChangeEvent) {
                this.value = e.detail.value
            }
        }
    }
</script>

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