|
@@ -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>
|