You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

79 lines
1.4 KiB

1 year ago
<template>
<div v-if="showMenu"
class="menu_style"
:style="{top:y + 'px',left:x + 'px'}">
<ul>
<li @click="ocr" :style="{cursor: hasContent? 'cursor' : 'not-allowed'}">OCR复制</li>
</ul>
</div>
</template>
<script>
export default {
name: 'right_menu',
props: {
x: {
type: [Number, String],
default: 0
},
y: {
type: [Number, String],
default: 0
},
showMenu: {
type: [Boolean],
default: false
},
hasContent: {
type: Boolean,
default: true
}
},
data() {
return {
show: false,
}
},
methods: {
ocr(e) {
if (!this.hasContent) {
return
}
// e.preventDefault()
this.$emit('ocr')
},
closeMenu(e) {
// this.show = false;
this.$emit("update:showMenu", false)
},
},
mounted() {
document.querySelector("body").addEventListener("click", this.closeMenu)
},
beforeDestroy() {
document.querySelector("body").removeEventListener("click", this.closeMenu)
},
}
</script>
<style scoped>
.menu_style {
position: fixed;
width: 120px;
background-color: #fff;
border-radius: 2px;
box-shadow: 2px 2px 14px #d0d0d0;
}
.menu_style > ul > li {
text-align: center;
/*text-indent: 25px;*/
height: 38px;
line-height: 38px;
border-bottom: 1px dashed #f0f0f0;
cursor: pointer;
}
.menu_style > ul > li:hover {
background: #E0EEFF;
}
</style>