102 lines
2.2 KiB
Vue
102 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} ${props?.disableds?.includes(i?.value) ? 'disabled' : ''}`"
|
||
:style="i?.value === props?.valueModel || i?.value === selectValue ? getStyleInfo() : ''"
|
||
@click="onClick(i)"
|
||
>
|
||
{{ i?.text }}
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { onMounted, ref, watch } from 'vue'
|
||
import { getStyleBgInfo } from '@/common/libraries/getPageConfig'
|
||
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 getStyleInfo = () => {
|
||
return {
|
||
...props.selectStyle,
|
||
...getStyleBgInfo()
|
||
}
|
||
}
|
||
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;
|
||
}
|
||
}
|
||
.active {
|
||
color: #fff;
|
||
background-color: #2a7efb;
|
||
}
|
||
.disabled {
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
</style>
|