You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
71 lines
1.3 KiB
71 lines
1.3 KiB
<template>
|
|
<view class="mt32 question__view" :class="[props.mode]">
|
|
<view class="size-28 mb20 question">
|
|
{{ `${props.index + 1}、${props.data.question}` }}
|
|
</view>
|
|
<view class="size-28 option"
|
|
v-for="(option, oIdx) in props.data.options"
|
|
:key="`${props.index}-option-${oIdx}`"
|
|
:class="[props.modelValue === option.value ? 'is-selected' : '']"
|
|
@click="onClick(option.value)"
|
|
>
|
|
{{ `${String.fromCharCode(65 + oIdx)}、${option.label}` }}
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
const props = defineProps({
|
|
index: {
|
|
type: Number,
|
|
default: null,
|
|
},
|
|
data: {
|
|
type: Object,
|
|
default() {
|
|
return {}
|
|
}
|
|
},
|
|
modelValue: {
|
|
type: String | Number,
|
|
default: null,
|
|
},
|
|
mode: {
|
|
type: String,
|
|
default: 'select', // select | display
|
|
}
|
|
})
|
|
|
|
const emit = defineEmits(['update:modelValue'])
|
|
|
|
const onClick = (val) => {
|
|
emit('update:modelValue', val)
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.question {
|
|
color: #000000;
|
|
}
|
|
|
|
.option {
|
|
background-color: #F3F3F3;
|
|
color: #707070;
|
|
line-height: 37rpx;
|
|
padding: 23rpx;
|
|
border-radius: 28rpx;
|
|
|
|
& + & {
|
|
margin-top: 20rpx;
|
|
}
|
|
}
|
|
|
|
.question__view.select {
|
|
.option.is-selected {
|
|
background-color: rgba($color: #FFBF60, $alpha: 0.22);
|
|
color: #FFBF60;
|
|
}
|
|
}
|
|
</style>
|