diff --git a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
index fd39afd240..43f1fcfda7 100644
--- a/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
+++ b/frontend/src/components/canvas/components/Editor/ComponentWrapper.vue
@@ -4,7 +4,9 @@
     :class="{'gap_class':canvasStyleData.panel.gap==='yes'}"
     class="component"
     @click="handleClick"
+    @mousedown="elementMouseDown"
   >
+    <edit-bar v-if="config === curComponent" />
     <de-out-widget
       v-if="config.type==='custom'"
       :id="'component' + config.id"
@@ -33,8 +35,10 @@ import runAnimation from '@/components/canvas/utils/runAnimation'
 import { mixins } from '@/components/canvas/utils/events'
 import { mapState } from 'vuex'
 import DeOutWidget from '@/components/dataease/DeOutWidget'
+import EditBar from '@/components/canvas/components/Editor/EditBar'
+
 export default {
-  components: { DeOutWidget },
+  components: { DeOutWidget, EditBar },
   mixins: [mixins],
   props: {
     config: {
@@ -60,7 +64,8 @@ export default {
   },
   computed: {
     ...mapState([
-      'canvasStyleData'
+      'canvasStyleData',
+      'curComponent'
     ])
   },
   mounted() {
@@ -94,6 +99,17 @@ export default {
       Object.keys(events).forEach(event => {
         this[event](events[event])
       })
+    },
+    elementMouseDown(e) {
+      debugger
+      // private 设置当前组件数据及状态
+      this.$store.commit('setClickComponentStatus', true)
+      if (this.config.component !== 'v-text' && this.config.component !== 'rect-shape' && this.config.component !== 'de-input-search' && this.config.component !== 'de-number-range') {
+        e.preventDefault()
+      }
+      // 阻止冒泡事件
+      e.stopPropagation()
+      this.$store.commit('setCurComponent', { component: this.config, index: this.index })
     }
   }
 }
diff --git a/frontend/src/components/canvas/components/Editor/Preview.vue b/frontend/src/components/canvas/components/Editor/Preview.vue
index 5b8fcbd1c9..9b6728fbf5 100644
--- a/frontend/src/components/canvas/components/Editor/Preview.vue
+++ b/frontend/src/components/canvas/components/Editor/Preview.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="canvasInfoTemp" :style="customStyle" class="bg">
+  <div id="canvasInfoTemp" :style="customStyle" class="bg" @mouseup="deselectCurComponent" @mousedown="handleMouseDown">
     <el-row v-if="componentDataShow.length===0" style="height: 100%;" class="custom-position">
       {{ $t('panel.panelNull') }}
     </el-row>
@@ -121,6 +121,8 @@ export default {
       return this.componentDataShow
     },
     ...mapState([
+      'isClickComponent',
+      'curComponent',
       'componentData',
       'canvasStyleData'
     ])
@@ -204,6 +206,17 @@ export default {
     },
     exportExcel() {
       this.$refs['userViewDialog'].exportExcel()
+    },
+    deselectCurComponent(e) {
+      debugger
+      if (!this.isClickComponent) {
+        this.$store.commit('setCurComponent', { component: null, index: null })
+      }
+    },
+    handleMouseDown() {
+      // console.log('handleMouseDown123')
+
+      this.$store.commit('setClickComponentStatus', false)
     }
   }
 }