|
|
|
@ -1,17 +1,19 @@ |
|
|
|
<template> |
|
|
|
<view class="grid gap-2"> |
|
|
|
<view v-for="(option, optionIndex) in options" :key="optionIndex" :class="[`row-span-${option.row}`]" class="mb-2"> |
|
|
|
<u-radio-group v-model="value"> |
|
|
|
<u-radio |
|
|
|
@change="radioChange" |
|
|
|
v-for="(item, index) in option.contents" |
|
|
|
:key="index" |
|
|
|
:name="item.id" |
|
|
|
:class="[`col-span-${item.col}`]" |
|
|
|
<view> |
|
|
|
<view class="mb-2"> |
|
|
|
<u-radio-group v-model="value" class="w-full"> |
|
|
|
<view |
|
|
|
v-for="(option, optionIndex) in options" |
|
|
|
:key="optionIndex" |
|
|
|
class="grid gap-2 w-full" |
|
|
|
:class="[`grid-cols-${option.contents.length}`]" |
|
|
|
> |
|
|
|
<text v-if="item.showType === 0">{{ item.content }}</text> |
|
|
|
<image style="width: 200px" :src="item.content" mode="widthFix" v-else /> |
|
|
|
</u-radio> |
|
|
|
<u-radio @change="radioChange" v-for="(item, index) in option.contents" :key="index" :name="item.id" class="my-1"> |
|
|
|
<!-- :class="[`col-span-${item.col}`]" --> |
|
|
|
<text v-if="item.showType === 0">{{ item.content }}</text> |
|
|
|
<image :style="{ width: options[0].contents.length === 1 ? '200px' : '100px' }" :src="item.content" mode="widthFix" v-else /> |
|
|
|
</u-radio> |
|
|
|
</view> |
|
|
|
</u-radio-group> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
@ -28,7 +30,13 @@ export default { |
|
|
|
}, |
|
|
|
|
|
|
|
data() { |
|
|
|
return {}; |
|
|
|
return { |
|
|
|
lists: [ |
|
|
|
{ id: 1, content: '张三', col: 1, showType: 0 }, |
|
|
|
{ id: 2, content: '李四', col: 1, showType: 0 }, |
|
|
|
{ id: 3, content: '王五', col: 1, showType: 0 }, |
|
|
|
], |
|
|
|
}; |
|
|
|
}, |
|
|
|
|
|
|
|
computed: { |
|
|
|
@ -52,6 +60,7 @@ export default { |
|
|
|
|
|
|
|
// 选中任一radio时，由radio-group触发 |
|
|
|
radioChange(e) { |
|
|
|
console.log('e: ', e); |
|
|
|
this.setOptionId(e); |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
