for_client/src/components/plugins/table-form/hc-form-radio-group.vue

<template>
    <div :class="isFocus?'is-focus':''" class="hc-form-radio-group-box"
         @keydown.shift.up="keyupShiftUp"
         @keydown.shift.down="keyupShiftDown"
         @keydown.shift.left="keyupShiftLeft"
         @keydown.shift.right="keyupShiftRight">
        <el-radio-group v-model="modelValues"
                        :disabled="disabled"
                        :keyname="keyname"
                        :placeholder="placeholder"
                        @change="radioGroupChange"
        >
            <slot></slot>
        </el-radio-group>
        <input :id="keyname" class="hc-radio-group-input" @blur="handleBlur" @focus="handleFocus"/>
    </div>
</template>

<script>
export default {
    inheritAttrs: false,
}
</script>

<script setup>
import {ref, watch} from 'vue'
import {ElRadioGroup, ElRadio} from 'element-plus'

const props = defineProps({
    modelValue: {
        type: [String, Number, Boolean]
    },
    keyname: {
        type: String,
        default: ''
    },
    placeholder: {
        type: String,
        default: ''
    },
    disabled: {
        type: Boolean,
        default: false
    },
})

//变量
const modelValues = ref(props.modelValue)

//监听
watch(() => [
    props.modelValue,
], ([val]) => {
    modelValues.value = val
})

//事件
const emit = defineEmits(['update:modelValue', 'change', 'keydowns'])

const radioGroupChange = (val) => {
    emit('update:modelValue', val)
    emit('change', val)
}

//向上
const keyupShiftUp = (e) => {
    emit('keydowns', {type: 'up', name: {target: {id: props.keyname}}, key: props.keyname, e});
}

//向下
const keyupShiftDown = (e) => {
    emit('keydowns', {type: 'down', name: {target: {id: props.keyname}}, key: props.keyname, e});
}

//向左
const keyupShiftLeft = (e) => {
    emit('keydowns', {type: 'left', name: {target: {id: props.keyname}}, key: props.keyname, e});
}

//向右
const keyupShiftRight = (e) => {
    emit('keydowns', {type: 'right', name: {target: {id: props.keyname}}, key: props.keyname, e});
}


//获得焦点
const isFocus = ref(false)
const handleFocus = () => {
    isFocus.value = true
}

//失去焦点
const handleBlur = () => {
    isFocus.value = false
}
</script>

<style lang="scss" scoped>
.hc-form-radio-group-box {
    position: relative;
    width: 100%;
    height: initial;
    border-radius: 4px;
    transition: box-shadow 0.3s, background-color 0.3s;
    &.is-focus, &:hover {
        background-color: #eddac4;
        box-shadow: 0 0 0 1.5px var(--el-color-primary) inset;
    }
    .hc-radio-group-input {
        position: absolute;
        z-index: -1;
        right: 10px;
        width: 10px;
    }
}
</style>