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.
60 lines
1.1 KiB
60 lines
1.1 KiB
<template> |
|
<view class="radio-group-container"> |
|
<view :class="modelValue === item[prop.value]? 'radio-group-item active' : 'radio-group-item'" v-for="item in data" @tap="change(item[prop.value])">{{ item[prop.text] }}</view> |
|
</view> |
|
</template> |
|
|
|
<script setup> |
|
import { defineProps } from 'vue' |
|
|
|
const props = defineProps({ |
|
data: { |
|
type: Array, |
|
default: [] |
|
}, |
|
modelValue: { |
|
type: String |
|
}, |
|
prop: { |
|
type: Object, |
|
default: { |
|
text: 'text', |
|
value: 'value' |
|
} |
|
} |
|
}) |
|
|
|
const emit = defineEmits(['update:modelValue', 'change']) |
|
|
|
function change(val) { |
|
if (props.modelValue === val) { |
|
emit('update:modelValue', '') |
|
} else { |
|
emit('update:modelValue', val) |
|
} |
|
emit('change') |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.radio-group-container { |
|
display: flex; |
|
flex-wrap: wrap; |
|
gap: 24rpx; |
|
margin-bottom: 48rpx; |
|
.radio-group-item { |
|
height: 60rpx; |
|
line-height: 60rpx; |
|
width: 212rpx; |
|
text-align: center; |
|
background: #F6F6F6; |
|
border-radius: 27rpx; |
|
font-size: 15px; |
|
border: 1px solid #F6F6F6; |
|
&.active { |
|
background: #E7F2FF; |
|
border-color: var(--primary-color); |
|
} |
|
} |
|
} |
|
</style> |