admin/src/components/table-form/components.vue

<template>
    <div v-click-outside="onClickOutside" class="hc-table-form-components-box" :class="isClick ? 'cur' : ''" @click="leftTap">{{ name }}</div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { getRandom, isNullES } from 'js-fast-way'
import { ClickOutside as vClickOutside } from 'element-plus'

const props = defineProps({
    type: [String, Number],
    placeholder: [String, Number],
    trindex: [String, Number],
    tdindex: [String, Number],
    x1: [String, Number],
    x2: [String, Number],
    y1: [String, Number],
    y2: [String, Number],
    rows: [String, Number],
    format: [String, Number],
    valueFormat: [String, Number],
    keyname: [String, Number],
    id: [String, Number],
})

//事件
const emit = defineEmits(['blur', 'focus'])

const uuid = getRandom(8)

//渲染完成
onMounted(()=> {
    matchingType()
})

//匹配组件类型
const name = ref('')
const typeObj = {
    text: '输入框',
    textarea: '多行输入框',
    date: '日期框',
}
const matchingType = () => {
    if (isNullES(props.type)) return
    name.value = typeObj[props.type]
}

const EVENT_KEY = 'hc-table-form-item'

//左键点击了
const isClick = ref(false)
const leftTap = () => {
    isClick.value = true
    //const keyName = `${EVENT_KEY}-${props.id ? props.id : props.keyname ? props.keyname : uuid}`
    //emitter.emit(keyName, { key: 'focus', props: props })
    emit('focus', props)
}

//失去焦点
const onClickOutside = () => {
    isClick.value = false
    //const keyName = `${EVENT_KEY}-${props.id ? props.id : props.keyname ? props.keyname : uuid}`
    //emitter.emit(keyName, { key: 'blur', props: props })
    emit('blur', props)
}

// 暴露出去
defineExpose({
    focus: leftTap,
    blur: onClickOutside,
})
</script>

<style scoped lang="scss">
.hc-table-form-components-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    color: #606266;
    cursor: pointer;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
    transition: border 0.2s;
    &:hover {
        border-color: #1682f1;
        background: #eddac4;
    }
    &.cur {
        border-color: #1682f1;
        background: #eddac4;
    }
}
</style>