Browse Source

修改点击事件

wangziqian 4 years ago
parent
commit
94bbace72a
1 changed files with 24 additions and 3 deletions
  1. 24 3
      src/components/click/overClick.vue

+ 24 - 3
src/components/click/overClick.vue

@@ -1,10 +1,20 @@
 <template>
-  <div :id="id" class="over-click" @click="handleClick()">
+  <div :id="id" class="over-click">
     <div v-show="active" class="active-context">
       <slot name="active" />
     </div>
-    <div v-show="!active" class="over-context">
+    <div
+      v-show="!active"
+      class="over-context"
+      @mouseover="hide(false)"
+      @mouseleave="hide(true)"
+    >
       <slot name="overMouse" />
+      <i
+        class="el-icon-edit"
+        :class="{'hide-edit': hideEdit}"
+        @click="handleClick()"
+      />
     </div>
   </div>
 </template>
@@ -25,7 +35,8 @@ export default {
   data() {
     return {
       visible: this.active,
-      listener: null
+      listener: null,
+      hideEdit: true
     }
   },
   watch: {
@@ -55,6 +66,9 @@ export default {
       this.visible = true
       this.$emit('update:active', this.visible)
       this.$emit('click')
+    },
+    hide(val) {
+      this.hideEdit = val
     }
   }
 }
@@ -63,4 +77,11 @@ export default {
 .active-context,.over-context{
   cursor: pointer;
 }
+.el-icon-edit {
+  margin-left: 5px;
+  padding-right: 5px;
+}
+.hide-edit {
+  visibility: hidden;
+}
 </style>