103 lines
2.2 KiB
Vue
103 lines
2.2 KiB
Vue
|
<template>
|
|||
|
|
<view class="radio_body" :style="props?.radioStyle">
|
|||
|
|
<view
|
|||
|
|
v-for="(i, index) in getEnums()"
|
|||
|
|
:key="`item_${index}`"
|
|||
|
|
:class="`item item_${props?.size} ${
|
|||
|
|
i?.value === props?.valueModel || i?.value === selectValue ? 'active' : ''
|
|||
|
|
} ${props?.disableds?.includes(i?.value) ? 'disabled' : ''}`"
|
|||
|
|
:style="i?.value === props?.valueModel || i?.value === selectValue ? props?.selectStyle : ''"
|
|||
|
|
@click="onClick(i)"
|
|||
|
|
>
|
|||
|
|
{{ i?.text }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script lang="ts" setup>
|
|||
|
|
import { onMounted, ref, watch } from 'vue'
|
|||
|
|
interface EnumItem {
|
|||
|
|
text?: string
|
|||
|
|
value?: string
|
|||
|
|
}
|
|||
|
|
const props = defineProps([
|
|||
|
|
'valueModel',
|
|||
|
|
'Enums',
|
|||
|
|
'size',
|
|||
|
|
'radioStyle',
|
|||
|
|
'selectStyle',
|
|||
|
|
'disableds' // 不可选数组 6-7 kfyy ，7.40 cook，
|
|||
|
|
])
|
|||
|
|
const selectValue = ref('')
|
|||
|
|
const getEnums = (): any => {
|
|||
|
|
let list: EnumItem[] = Object.entries(props?.Enums as Record<string, EnumItem>).map(
|
|||
|
|
([_key, value]) => ({
|
|||
|
|
text: value.text,
|
|||
|
|
value: value.value
|
|||
|
|
})
|
|||
|
|
)
|
|||
|
|
return list
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => props?.valueModel,
|
|||
|
|
() => {
|
|||
|
|
console.log('mounted2', props?.valueModel)
|
|||
|
|
selectValue.value = props?.valueModel
|
|||
|
|
}
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
const emit = defineEmits(['update:valueModel', 'onChange'])
|
|||
|
|
const onClick = (e: { value: string }) => {
|
|||
|
|
if (props?.disableds?.includes(e?.value)) {
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
selectValue.value = e?.value
|
|||
|
|
emit('update:valueModel', e?.value)
|
|||
|
|
emit('onChange', e)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
console.log('mounted1', props?.valueModel)
|
|||
|
|
if (props?.valueModel) {
|
|||
|
|
selectValue.value = props?.valueModel
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.radio_body {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
.item {
|
|||
|
|
padding: 0 27rpx;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
line-height: 60rpx;
|
|||
|
|
color: #333;
|
|||
|
|
text-align: center;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
background-color: #f3f3f4;
|
|||
|
|
border-radius: 6rpx;
|
|||
|
|
margin-right: 15rpx;
|
|||
|
|
&:last-child {
|
|||
|
|
margin: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// .item_sm {
|
|||
|
|
// }
|
|||
|
|
// .item_md {
|
|||
|
|
// }
|
|||
|
|
// .item_lg {
|
|||
|
|
// }
|
|||
|
|
.active {
|
|||
|
|
color: #333;
|
|||
|
|
background-color: #ffd415;
|
|||
|
|
}
|
|||
|
|
.disabled {
|
|||
|
|
opacity: 0.7;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|