radio.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
    <!-- #endif -->
    <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>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</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>