更新依赖

src/components/table-form/components.vue

@@ -1,10 +1,11 @@
 <template>
-    <div class="hc-table-form-components-box" @click="leftTap">{{ name }}</div>
+    <div v-click-outside="onClickOutside" class="hc-table-form-components-box" :class="isClick ? 'cur' : ''" @click="leftTap">{{ name }}</div>
 </template>
 
 <script setup>
-import { isNullES } from 'js-fast-way'
 import { onMounted, ref } from 'vue'
+import { isNullES } from 'js-fast-way'
+import { ClickOutside as vClickOutside } from 'element-plus'
 
 const props = defineProps({
     type: [String, Number],
@@ -19,8 +20,12 @@ const props = defineProps({
     format: [String, Number],
     valueFormat: [String, Number],
     keyname: [String, Number],
+    id: [String, Number],
 })
 
+//事件
+const emit = defineEmits(['blur', 'focus'])
+
 //渲染完成
 onMounted(()=> {
     matchingType()
@@ -39,9 +44,23 @@ const matchingType = () => {
 }
 
 //左键点击了
+const isClick = ref(false)
 const leftTap = () => {
-    console.log('1111')
+    isClick.value = true
+    emit('focus', props)
+}
+
+//失去焦点
+const onClickOutside = () => {
+    isClick.value = false
+    emit('blur', props)
 }
+
+// 暴露出去
+defineExpose({
+    focus: leftTap,
+    blur: onClickOutside,
+})
 </script>
 
 <style scoped lang="scss">
@@ -60,5 +79,9 @@ const leftTap = () => {
         border-color: #1682f1;
         background: #eddac4;
     }
+    &.cur {
+        border-color: #1682f1;
+        background: #eddac4;
+    }
 }
 </style>