更新依赖

src/components/table-form/components.vue

@@ -1,12 +1,15 @@
 <template>
-    <div v-click-outside="onClickOutside" class="hc-table-form-components-box" :class="isClick ? 'cur' : ''" @click="leftTap">{{ name }}</div>
+    <div
+        :id="id" class="hc-table-form-components-box" :data-key="keyname"
+        :data-index="`${trindex}_${tdindex}`" :data-x1="x1" :data-x2="x2" :data-y1="y1" :data-y2="y2"
+    >
+        {{ name }}
+    </div>
 </template>
 
 <script setup>
 import { onMounted, ref } from 'vue'
-import { useClick } from 'hc-vue3-ui'
 import { isNullES } from 'js-fast-way'
-import { ClickOutside as vClickOutside } from 'element-plus'
 
 const props = defineProps({
     type: [String, Number],
@@ -24,9 +27,6 @@ const props = defineProps({
     id: [String, Number],
 })
 
-//事件
-const emit = defineEmits(['blur', 'focus'])
-
 //渲染完成
 onMounted(()=> {
     matchingType()
@@ -43,41 +43,6 @@ const matchingType = () => {
     if (isNullES(props.type)) return
     name.value = typeObj[props.type]
 }
-
-//左键点击了
-const isClick = ref(false)
-const leftTap = () => {
-    isClick.value = true
-    window.postMessage({
-        type: 'table-form',
-        key: 'focus',
-        data: { ...props },
-    })
-    emit('focus', props)
-}
-
-//点击了其它地方
-const onClickOutside = () => {
-    isClick.value = false
-    onClickBlur()
-}
-
-//失去焦点
-const onClickBlur = async () => {
-    await useClick()
-    window.postMessage({
-        type: 'table-form',
-        key: 'blur',
-        data: { ...props },
-    })
-    emit('blur', props)
-}
-
-// 暴露出去
-defineExpose({
-    focus: leftTap,
-    blur: onClickOutside,
-})
 </script>
 
 <style scoped lang="scss">

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

@@ -1,7 +1,7 @@
 <template>
     <div :id="`table-form-item-${uuid}`" :class="!isTableForm ? 'no-scroll-bar' : ''" class="hc-table-form-data-item h-full w-full">
         <el-scrollbar class="table-form-item-scrollbar">
-            <div :id="`table-form-${uuid}`" class="hc-excel-table-form" @click.capture="excelTableFormClick" />
+            <div :id="`table-form-${uuid}`" class="hc-excel-table-form" />
         </el-scrollbar>
         <hc-empty v-if="!isTableForm" :src="notableform" title="暂无表单数据" />
     </div>
@@ -23,7 +23,7 @@ const props = defineProps({
 })
 
 //事件
-const emit = defineEmits(['blur', 'focus', 'render', 'excelBodyTap'])
+const emit = defineEmits(['tap', 'render'])
 
 const uuid = getRandom(8)
 
@@ -38,7 +38,7 @@ const isTableForm = ref(false)
 
 //渲染完成
 onMounted(() => {
-    setEmitterData()
+    initClickEvents()
     getExcelHtml()
 })
 
@@ -54,21 +54,9 @@ watch(() => props.form, (val) => {
     setFormData(val)
 }, { deep: true })
 
-//注册监听事件
-const setEmitterData = () => {
-    window.addEventListener('message', ({ data }) => {
-        if (data.type !== 'table-form') return
-        if (data.key === 'focus') {
-            emit('focus', data.data)
-        } else if (data.key === 'blur') {
-            emit('blur', data.data)
-        }
-    })
-}
+//注册被点击事件
+const initClickEvents = () => {
 
-//表单被点击
-const excelTableFormClick = () => {
-    emit('excelBodyTap', uuid)
 }
 
 const setExcelHtml = () => {

src/views/exctab/element/index.vue

@@ -23,7 +23,7 @@
                 </hc-card>
             </template>
             <hc-card :title="`【元素识别】${isNullES(nodeInfo.name) ? '表名称' : nodeInfo.name}`">
-                <hc-table-form ref="excelRef" :html="excelHtml" @focus="excelClick" @blur="excelBlur" />
+                <hc-table-form ref="excelRef" :html="excelHtml" @focus="excelClick" />
             </hc-card>
             <template #right>
                 <hc-card>
@@ -208,11 +208,6 @@ const tableScrollToRow = async (index) => {
     tabRef.value?.tableRef?.setScrollTop(row.offsetTop)
 }
 
-//框框失去焦点
-const excelBlur = (item) => {
-
-}
-
 //保存元素表格
 const saveRowClick = (row) => {
 
@@ -223,7 +218,6 @@ const delRowClick = (row) => {
 
 }
 
-
 //关闭抽屉
 const drawerClose = () => {
     isShow.value = false