248 lines
9.2 KiB
Vue
248 lines
9.2 KiB
Vue
<template>
|
||
<div id="contextmenu" class="contextmenu" v-show="visible" :style="{
|
||
'z-index': zIndex
|
||
}">
|
||
|
||
<div class="contextmenu__item" @click="handleMenu('open')" v-show="checkList.length <= 1">
|
||
<i class="icon el-icon-right icon_open" />
|
||
<span>{{ $t('trials:trials-workbench:auditDocument:menu:open') }}</span>
|
||
</div>
|
||
<div class="contextmenu__item" @click="handleMenu('download')">
|
||
<i class="icon icon_download" />
|
||
<span>{{ $t('trials:trials-workbench:auditDocument:menu:download') }}</span>
|
||
</div>
|
||
<template v-if="['file', 'files', 'folder'].includes(type)">
|
||
<div class="line"></div>
|
||
<div class="contextmenu__item" @click="handleMenu('copy')">
|
||
<i class="icon icon_copy" />
|
||
<span>{{ $t('trials:trials-workbench:auditDocument:menu:copy') }}</span>
|
||
</div>
|
||
<div class="contextmenu__item" @click="handleMenu('shear')">
|
||
<i class="icon icon_shear" />
|
||
<span>{{ $t('trials:trials-workbench:auditDocument:menu:shear') }}</span>
|
||
</div>
|
||
<div class="contextmenu__item" @click="handleMenu('rename')" v-show="checkList.length <= 1">
|
||
<i class="icon icon_rename" />
|
||
<span>{{ $t('trials:trials-workbench:auditDocument:menu:rename') }}</span>
|
||
</div>
|
||
<div class="contextmenu__item" @click="handleMenu('del')">
|
||
<i class="icon icon_del" />
|
||
<span>{{ $t('trials:trials-workbench:auditDocument:menu:del') }}</span>
|
||
</div>
|
||
</template>
|
||
<template v-if="checkList.length <= 1 && type === 'file'">
|
||
<div class="line"></div>
|
||
<div class="contextmenu__item" @click="handleMenu('version')">
|
||
<i class="icon el-icon-warning-outline icon_Stats" />
|
||
<span>{{ $t('trials:trials-workbench:auditDocument:menu:version') }}</span>
|
||
</div>
|
||
</template>
|
||
<template v-if="type === 'version' || type === 'c_version'">
|
||
<div class="line"></div>
|
||
<div class="contextmenu__item" @click="handleMenu('setVersion')" v-if="type === 'version'">
|
||
<i class="icon el-icon-document-checked icon_Stats" />
|
||
<span>{{ $t('trials:trials-workbench:auditDocument:menu:setVersion') }}</span>
|
||
</div>
|
||
<div class="contextmenu__item" @click="handleMenu('delVersion')" v-if="type === 'version'">
|
||
<i class="icon el-icon-delete icon_Stats" />
|
||
<span>{{ $t('trials:trials-workbench:auditDocument:menu:delVersion') }}</span>
|
||
</div>
|
||
<div class="contextmenu__item" @click="handleMenu('delAllVersion')">
|
||
<i class="icon el-icon-delete-solid icon_Stats" />
|
||
<span>{{ $t('trials:trials-workbench:auditDocument:menu:delAllVersion') }}</span>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "index",
|
||
props: {
|
||
checkList: {
|
||
type: Array,
|
||
default: () => {
|
||
return []
|
||
}
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
visible: false,
|
||
type: 'file',
|
||
zIndex: 9,
|
||
rowData: {}
|
||
};
|
||
},
|
||
methods: {
|
||
init(event, row, type, zIndex = 9) {
|
||
this.rowData = row
|
||
this.type = type
|
||
this.zIndex = zIndex
|
||
// 设置菜单出现的位置
|
||
// 具体显示位置根据自己需求进行调节
|
||
this.visible = true
|
||
let menu = document.querySelector("#contextmenu");
|
||
let chaY = document.body.clientHeight - event.clientY;
|
||
let chaX = document.body.clientWidth - event.clientX;
|
||
// 防止菜单太靠底，根据可视高度调整菜单出现位置
|
||
if (chaY < 150) {
|
||
menu.style.top = event.clientY - 220 + "px";
|
||
} else {
|
||
menu.style.top = event.clientY + "px";
|
||
}
|
||
if (chaX < 150) {
|
||
menu.style.left = event.clientX - 200 + "px";
|
||
} else {
|
||
menu.style.left = event.clientX + 15 + "px";
|
||
}
|
||
|
||
document.addEventListener("click", this.foo); // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
|
||
},
|
||
foo() {
|
||
this.visible = false
|
||
this.$emit("foo");
|
||
},
|
||
handleMenu(item) {
|
||
this.$emit("handleMenu", { key: item, row: this.rowData });
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.contextmenu__item {
|
||
display: block;
|
||
cursor: pointer;
|
||
white-space: nowrap;
|
||
clear: both;
|
||
border-radius: 4px;
|
||
line-height: 30px;
|
||
height: 30px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
border: none;
|
||
color: #444;
|
||
transition: background-color .15s;
|
||
padding: 0px 15px 0 15px;
|
||
|
||
}
|
||
|
||
.contextmenu {
|
||
min-width: 180px;
|
||
max-width: 250px;
|
||
font-size: 14px;
|
||
display: inline-block;
|
||
background: #fff;
|
||
border-radius: 4px;
|
||
position: fixed;
|
||
padding: 10px 6px;
|
||
list-style-type: none;
|
||
max-height: 80vh;
|
||
overflow: hidden;
|
||
overflow-y: auto;
|
||
box-sizing: border-box;
|
||
background-image: url(@/assets/color-bg.png);
|
||
background-size: 100% auto;
|
||
background-position: top 0 right 0;
|
||
background-repeat: no-repeat;
|
||
box-shadow: 0 0 0 .5px #88888830, 0 10px 40px 0 #88888840;
|
||
}
|
||
|
||
.contextmenu__item:hover {
|
||
cursor: pointer;
|
||
background: #99999920;
|
||
color: #444;
|
||
}
|
||
|
||
.line {
|
||
border-bottom: 1px solid #66666630;
|
||
height: 2px;
|
||
line-height: 0;
|
||
margin: 2px 0 4px;
|
||
margin-left: 16px;
|
||
margin-right: -5px;
|
||
cursor: default;
|
||
padding: 0px 15px 0 15px;
|
||
color: #444;
|
||
display: block;
|
||
white-space: nowrap;
|
||
clear: both;
|
||
border-radius: 4px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.icon {
|
||
font-style: normal;
|
||
vertical-align: middle;
|
||
text-align: center;
|
||
color: #aaa;
|
||
font-size: 17px;
|
||
margin-top: -2px;
|
||
width: 16px;
|
||
line-height: 16px;
|
||
display: inline-block;
|
||
height: 16px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
/*打开*/
|
||
.icon_open {
|
||
color: #1890ff;
|
||
}
|
||
|
||
/*下载*/
|
||
.icon_download {
|
||
display: inline-block;
|
||
background-image: url(@/assets/menu_icon.png);
|
||
background-position: -16px -48px;
|
||
background-size: auto !important;
|
||
background-repeat: no-repeat;
|
||
height: 16px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
/**剪切*/
|
||
.icon_shear {
|
||
background-size: cover !important;
|
||
background: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAyNCAxMDI0JyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zycgd2lkdGg9JzIwMCcgaGVpZ2h0PScyMDAnPjxwYXRoIGQ9J001NjkuNyAzODguM0w3NDMuMiAxNDNjMTYtMjcuNyA2LjUtNjMtMjEuMi03OUw1MTIgMzE4LjMgMzAyIDY0Yy0yNy44IDE2LTM3LjMgNTEuMy0yMS4yIDc5bDE3My41IDI0NS4zTDI3MyA2MDcuOWw5NS45IDYwLjEgNjEuNS04Mi43TDUxMiA0NjkuOWw4MS42IDExNS40IDYxLjUgODIuNyA5NS45LTYwLjEtMTgxLjMtMjE5LjZ6JyBmaWxsPScjN0Y4MDgwJz48L3BhdGg+PHBhdGggZD0nTTI3MyA2MDZjLTk3LjYgMC0xNzcgNzkuNC0xNzcgMTc3czc5LjQgMTc3IDE3NyAxNzcgMTc3LTc5LjQgMTc3LTE3Ny03OS40LTE3Ny0xNzctMTc3eiBtMSAyOTBjLTYyLjMgMC0xMTMtNTAuNy0xMTMtMTEzczUwLjctMTEzIDExMy0xMTMgMTEzIDUwLjcgMTEzIDExMy01MC43IDExMy0xMTMgMTEzek03NTEgNjA2Yy05Ny42IDAtMTc3IDc5LjQtMTc3IDE3N3M3OS40IDE3NyAxNzcgMTc3IDE3Ny03OS40IDE3Ny0xNzctNzkuNC0xNzctMTc3LTE3N3ogbTAgMjkwYy02Mi4zIDAtMTEzLTUwLjctMTEzLTExM3M1MC43LTExMyAxMTMtMTEzIDExMyA1MC43IDExMyAxMTMtNTAuNyAxMTMtMTEzIDExM3onIGZpbGw9JyM0OTdDQUQnPjwvcGF0aD48L3N2Zz4=);
|
||
}
|
||
|
||
/**复制*/
|
||
.icon_copy {
|
||
background-size: cover !important;
|
||
background: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMTAyNCAxMDI0JyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2Zyc+PHBhdGggZD0nTTcwNCAyNTZoNjguMDk2bDE0Ny4zOTIgMTU5LjA0YTMyIDMyIDAgMCAxIDguNTEyIDIxLjc2Vjg5NmEzMiAzMiAwIDAgMS0zMiAzMkgzNTJhMzIgMzIgMCAwIDEtMzItMzJ2LTEyOEgxMjhhMzIgMzIgMCAwIDEtMzItMzJWMTI4YTMyIDMyIDAgMCAxIDMyLTMyaDU0NGEzMiAzMiAwIDAgMSAzMiAzMnYxMjh6JyBmaWxsPScjRkZGRkZGJz48L3BhdGg+PHBhdGggZD0nTTI1NiA3MzZ2MzJIMTI4YTMyIDMyIDAgMCAxLTMyLTMyVjEyOGEzMiAzMiAwIDAgMSAzMi0zMmg1NDRhMzIgMzIgMCAwIDEgMzIgMzJ2NjRoLTMyVjEyOEgxMjh2NjA4aDEyOHonIGZpbGw9JyM1RDZEN0UnPjwvcGF0aD48cGF0aCBkPSdNNzY4IDI1Ny4xODRsMC4zMi0wLjMyIDE2MC41NDQgMTU3LjYtMS41MDQgMS41MzZIOTI4djQ4MGEzMiAzMiAwIDAgMS0zMiAzMkgzNTJhMzIgMzIgMCAwIDEtMzItMzJWMjg4YTMyIDMyIDAgMCAxIDMyLTMyaDQxNnYxLjE4NHogbTAgNDQuMjI0VjQxNmgxMTYuNzM2TDc2OCAzMDEuNDR6TTczNiAyODhIMzUydjYwOGg1NDRWNDQ4aC0xNjBWMjg4eicgZmlsbD0nIzUwODRiZSc+PC9wYXRoPjxwYXRoIGQ9J000NDggNDE2aDE5MnYzMmgtMTkydi0zMnogbTAgMTYwaDM1MnYzMkg0NDh2LTMyeiBtMCAxNjBoMzUydjMySDQ0OHYtMzJ6JyBmaWxsPScjQUNCNEMwJz48L3BhdGg+PC9zdmc+);
|
||
}
|
||
|
||
/*重命名*/
|
||
.icon_rename {
|
||
display: inline-block;
|
||
background-image: url(@/assets/menu_icon.png);
|
||
background-position: 0 -64px;
|
||
background-size: auto !important;
|
||
background-repeat: no-repeat;
|
||
height: 16px;
|
||
margin-right: 8px;
|
||
width: 16px;
|
||
}
|
||
|
||
/*删除*/
|
||
.icon_del {
|
||
color: #1890ff;
|
||
display: inline-block;
|
||
background-image: url(@/assets/menu_icon.png);
|
||
background-position: 0 -80px;
|
||
background-size: auto !important;
|
||
background-repeat: no-repeat;
|
||
height: 16px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
/*属性*/
|
||
.icon_Stats {
|
||
color: #1890ff;
|
||
}
|
||
</style> |