79 lines
1.5 KiB
Vue
79 lines
1.5 KiB
Vue
|
<template>
|
||
|
|
<common-cell :name="name" :required="required">
|
||
|
|
<view class="form-content__wrapper">
|
||
|
|
<view class="form-radio-group">
|
||
|
|
<view v-for="i in range" :key="i" class="flex items-center flex-shrink-0 form-radio-group-item"
|
||
|
|
@click="change(i)">
|
||
|
|
<uni-icons class="radio__icon color-primary" :type="value === i ? 'circle-filled' : 'circle'"
|
||
|
|
color="#0094ff"></uni-icons>
|
||
|
|
<view :class="value === i ? 'text-primary' : ''">{{ i }}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</common-cell>
|
||
|
|
</template>
|
||
|
|
<script setup>
|
||
|
|
import { computed } from 'vue';
|
||
|
|
|
||
|
|
import commonCell from '../common-cell.vue';
|
||
|
|
|
||
|
|
const emits = defineEmits(['change']);
|
||
|
|
const props = defineProps({
|
||
|
|
form: {
|
||
|
|
type: Object,
|
||
|
|
default: () => ({})
|
||
|
|
},
|
||
|
|
name: {
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
range: {
|
||
|
|
type: Array,
|
||
|
|
default: () => []
|
||
|
|
},
|
||
|
|
required: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
disableChange: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
title: {
|
||
|
|
default: ''
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const value = computed(() => props.form && props.form && props.form[props.title] ? props.form[props.title] : '')
|
||
|
|
|
||
|
|
function change(value) {
|
||
|
|
if (props.disableChange) return;
|
||
|
|
emits('change', {
|
||
|
|
value,
|
||
|
|
title: props.title,
|
||
|
|
})
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.form-radio-group {
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
margin-bottom: -10rpx;
|
||
|
|
margin-left: -30rpx;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.form-radio-group-item {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
flex-shrink: 0;
|
||
|
|
margin-bottom: 10rpx;
|
||
|
|
margin-left: 30rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.radio__icon {
|
||
|
|
margin-right: 10rpx;
|
||
|
|
flex-shrink: 0;
|
||
|
|
}
|
||
|
|
</style>
|