<!-- eslint-disable vue/no-dupe-keys -->
<template>
<div>
<div class="search-box">
<div class="search">
<el-input placeholder="搜索" prefix-icon="el-icon-search" v-model="input2">
</el-input>
</div>
</div>
<div @contextmenu.prevent="showMenu" class="card-box">
<el-card class="card" v-for="(item, index) in DataMergin" :key="index">
<img :src="item.image" class="image" />
<div class="card-txt">
<span>{{ item.title }}</span>
<div class="bottom clearfix">
<span>更新时间:{{ item.time }}</span>
</div>
</div>
</el-card>
</div>
<div class="fixed-box" :style="{ 'left': menuLeft + 'px', 'top': menuTop + 'px' }" ref="fixedBoxRef" @blur="handle"
v-show="isShowMenu">
<div :class="index == currentItmeIndex ? 'current-color' : ''" @mouseenter="handleMouseEnter(item, index)"
class="menu-item" v-for="(item, index) in menusItme">
<i class="icon-position" :class="index == currentItmeIndex ? 'el-icon-check' : ''"></i>
{{ item }}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
input2: "",
isShowMenu: false,
menuLeft: '',
menuTop: '',
iconShow: false,
fixedBoxRef: '',
menusItme: ['模型详情', '重命名', '分享', '移动到', '更新', '简略图', '模型对比', '删除', '插入', '切换'],
currentItmeIndex: '',
DataMergin: [
{
title: "Revit",
image: require("../../assets/DataMerging_img/Revit.png"),
time: "2021.01.31",
},
{
title: "Navisworks",
image: require("../../assets/DataMerging_img/Navisworks.png"),
time: "2021.01.31",
},
{
title: "MicroStation",
image: require("../../assets/DataMerging_img/MicroStation.png"),
time: "2021.01.31",
},
{
title: "PDMS",
image: require("../../assets/DataMerging_img/PDMS.png"),
time: "2021.01.31",
},
{
title: "Sketchup",
image: require("../../assets/DataMerging_img/Sketchup.png"),
time: "2021.01.31",
},
{
title: "Inventor",
image: require("../../assets/DataMerging_img/Inventor.png"),
time: "2021.01.31",
},
{
title: "3Ds MAX",
image: require("../../assets/DataMerging_img/3Ds MAX.png"),
time: "2021.01.31",
},
{
title: "AUTOCAD",
image: require("../../assets/DataMerging_img/AUTOCAD.png"),
time: "2021.01.31",
},
],
};
},
mounted() {
//失去焦点时关闭右击菜单
document.addEventListener("click", (e) => {
if (!this.$refs.fixedBoxRef.contains(e.target)) { this.isShowMenu = false; }
});
},
methods: {
handleMouseEnter(item, index) {
// console.log('鼠标移入', item, index);
this.currentItmeIndex = index;
if (this.currentItmeIndex === index) {
// console.log("相同");
this.iconShow = true
};
},
showMenu(e) {
// console.log('ssssssssssssssss', e);
e.preventDefault()
this.isShowMenu = true
this.menuLeft = e.pageX
this.menuTop = e.pageY
},
handle() {
// console.log("失去焦点");
}
}
};
</script>
<style lang="scss" scope>
.search-box {
padding: 15px 55px 50px 0px;
background-color: #fff;
box-shadow: 0 3px 10px rgba(202, 196, 196, 0.3);
}
.search {
width: 15%;
float: right;
}
.card-box {
margin: 20px;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.bottom {
margin-top: 13px;
line-height: 12px;
color: #c1c1c1;
font-size: 14px;
}
.image {
width: 100%;
height: 250px;
display: block;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.card {
text-align: center;
width: 23.5%;
height: 350px;
margin: 0.7%;
}
.card-txt {
padding: 14px;
text-align: center;
font-size: 20px;
}
.fixed-box {
background-color: red;
// position: absolute;
position: fixed;
z-index: 1004;
background-color: #dadada;
border-radius: 5px;
width: 100px;
padding-bottom: 8px;
// height: 200px;
}
.menu-item {
// position: absolute;
// display: flex;
// justify-content: center;
// align-items: center;
padding-left: 30%;
cursor: pointer;
margin-top: 8px;
position: relative;
}
.current-color {
background-color: grey;
}
.icon-position {
position: absolute;
left: 5px;
top: 2px
}
</style>
08-11
1505
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-19