|
@@ -0,0 +1,264 @@
|
|
|
|
+<template>
|
|
|
|
+ <!-- 下载/预览/删除 -->
|
|
|
|
+ <div class="menuPopover" :class="menuStyle" @mouseover="mouseover" @mouseout="mouseout">
|
|
|
|
+
|
|
|
|
+ <el-popover placement="top-start" title="" trigger="hover" popper-class="popperClass"
|
|
|
|
+ >
|
|
|
|
+ <div class="menuList" >
|
|
|
|
+ <div v-for="item in menuList" :key="item.value" @click="menuBtn(item)" class="menuListLi" v-show="item.show">
|
|
|
|
+ <i :class="item.icon"></i><span>{{item.label}}</span>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <div slot="reference" class="menu-button">
|
|
|
|
+ <div class="line-box">
|
|
|
|
+ <div class="line"></div>
|
|
|
|
+ <div class="line"></div>
|
|
|
|
+ <div class="line"></div>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ </el-popover>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+</template>
|
|
|
|
+<script>
|
|
|
|
+
|
|
|
|
+import { File } from './mixins'
|
|
|
|
+export default {
|
|
|
|
+ props: {
|
|
|
|
+ data: {
|
|
|
|
+ type: Object,
|
|
|
|
+ default: () => {
|
|
|
|
+ return {}
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ deleted: {
|
|
|
|
+ type: Boolean,
|
|
|
|
+ default:true
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ mixins: [File],
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ menuStyle: 'menu-box',
|
|
|
|
+ active: false,
|
|
|
|
+ menuList: [
|
|
|
|
+ {value:'downLoad',label:'下载',icon:'el-icon-download',show:true},
|
|
|
|
+ {value:'preview',label:'预览',icon:'el-icon-view',show:true},
|
|
|
|
+ {value:'delFile',label:'删除',icon:'el-icon-delete',show:this.deleted},
|
|
|
|
+ ]
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ watch: {
|
|
|
|
+ deleted(val) {
|
|
|
|
+ this.menuList.forEach(item => {
|
|
|
|
+ if (item.value == 'delFile') {
|
|
|
|
+ item.show = val
|
|
|
|
+ return false
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ menuBtn(item) {
|
|
|
|
+ var data =this.data
|
|
|
|
+ switch (item.value) {
|
|
|
|
+ case 'downLoad':
|
|
|
|
+ this.downLoad(data)
|
|
|
|
+ break;
|
|
|
|
+ case 'preview':
|
|
|
|
+ this.preview(data)
|
|
|
|
+ break;
|
|
|
|
+ case 'delFile':
|
|
|
|
+ this.delFile(data)
|
|
|
|
+ break;
|
|
|
|
+
|
|
|
|
+ default:
|
|
|
|
+ break;
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ mouseover() {
|
|
|
|
+ this.menuStyle = 'active'
|
|
|
|
+ this.active = true
|
|
|
|
+ },
|
|
|
|
+ mouseout() {
|
|
|
|
+ this.menuStyle = ''
|
|
|
|
+ this.active = false
|
|
|
|
+ },
|
|
|
|
+
|
|
|
|
+ }
|
|
|
|
+}
|
|
|
|
+</script>
|
|
|
|
+<style >
|
|
|
|
+.el-popover.popperClass {
|
|
|
|
+ min-width: 80px ;
|
|
|
|
+ border: 1px solid #ACA9A9;
|
|
|
|
+}
|
|
|
|
+.el-popper[x-placement^=top] .popper__arrow::after{
|
|
|
|
+ border-top-color: #7f7f7f;
|
|
|
|
+ bottom: 0px;
|
|
|
|
+}
|
|
|
|
+</style>
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
+.menuList :first-child{
|
|
|
|
+ padding-top: 0px;
|
|
|
|
+}
|
|
|
|
+.menuList :hover{
|
|
|
|
+ color: #5c67ff;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.menuListLi{
|
|
|
|
+ border-bottom: 1px solid #e6e6e6;
|
|
|
|
+ padding: 10px 0 3px 0;
|
|
|
|
+}
|
|
|
|
+.menuListLi :first-child{
|
|
|
|
+ padding-right: 5px;
|
|
|
|
+}
|
|
|
|
+.menu-button {
|
|
|
|
+ width: 25px;
|
|
|
|
+ height: 25px;
|
|
|
|
+ background-color: white;
|
|
|
|
+ border-radius: 50%;
|
|
|
|
+ // box-shadow: 0 0 0 4px rgba(92,103,255,0.3);
|
|
|
|
+ color: #fff;
|
|
|
|
+ display: flex;
|
|
|
|
+ justify-content: center;
|
|
|
|
+ align-items: center;
|
|
|
|
+ position: relative;
|
|
|
|
+
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ transition: 0.2s ease-in;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.menu-button:hover {
|
|
|
|
+ background-color: white;
|
|
|
|
+ z-index: 999;
|
|
|
|
+ // box-shadow: 0 0 0 8px rgba(92,103,255,0.3);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.menu-button .line-box {
|
|
|
|
+ width: 10px;
|
|
|
|
+ height: 10px;
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ justify-content: space-between;
|
|
|
|
+ cursor: pointer;
|
|
|
|
+ transition: transform 0.3s ease-out;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.menu-button .line {
|
|
|
|
+ background-color: black;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 2px;
|
|
|
|
+ border-radius: 2px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.menu-button .line:first-child {
|
|
|
|
+ width: 50%;
|
|
|
|
+ transform-origin: right;
|
|
|
|
+ transition: transform 0.3s ease-in-out;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.menu-button .line:last-child {
|
|
|
|
+ width: 50%;
|
|
|
|
+ align-self: flex-end;
|
|
|
|
+ transform-origin: left;
|
|
|
|
+ transition: transform 0.3s ease-in-out;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// .menu-list1 {
|
|
|
|
+// padding: 6px;
|
|
|
|
+// transition: 0.3s ease;
|
|
|
|
+// transition: delay 0.3s;
|
|
|
|
+
|
|
|
|
+// }
|
|
|
|
+
|
|
|
|
+// .menu-list1 li {
|
|
|
|
+// display: flex;
|
|
|
|
+// justify-content: center;
|
|
|
|
+// align-items: center;
|
|
|
|
+// padding: 10px;
|
|
|
|
+// color: #343470;
|
|
|
|
+// cursor: pointer;
|
|
|
|
+// position: relative;
|
|
|
|
+// opacity: 1;
|
|
|
|
+// transform: translateX(-10px);
|
|
|
|
+// transition: 0.2s ease-in;
|
|
|
|
+// }
|
|
|
|
+
|
|
|
|
+// .menu-list1 li:hover {
|
|
|
|
+// color: #5c67ff;
|
|
|
|
+// }
|
|
|
|
+
|
|
|
|
+.menu-list1 li::before {
|
|
|
|
+ content: '';
|
|
|
|
+ width: calc(100% - 24px);
|
|
|
|
+ height: 1px;
|
|
|
|
+ background-color: rgba(92, 103, 255, 0.1);
|
|
|
|
+ position: absolute;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ left: 12px;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.menu-list1 li:last-child::before {
|
|
|
|
+ display: none;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+// .menu-list1 .fa {
|
|
|
|
+// font-size: 18px;
|
|
|
|
+// width: 18px;
|
|
|
|
+// height: 18px;
|
|
|
|
+// display: flex;
|
|
|
|
+// justify-content: center;
|
|
|
|
+// align-items: center;
|
|
|
|
+// }
|
|
|
|
+
|
|
|
|
+// .menu-list1 span {
|
|
|
|
+// font-size: 14px;
|
|
|
|
+// margin-left: 8px;
|
|
|
|
+// }
|
|
|
|
+
|
|
|
|
+.active {
|
|
|
|
+ position: relative;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.active .line-box {
|
|
|
|
+ transform: rotate(-45deg);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.active .line-box .line:first-child {
|
|
|
|
+ transform: rotate(-90deg) translateX(1px);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.active .line-box .line:last-child {
|
|
|
|
+ transform: rotate(-90deg) translateX(-1px);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.active .menu-list {
|
|
|
|
+ margin: 0;
|
|
|
|
+ opacity: 1;
|
|
|
|
+ transform: scale(1);
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.active .menu-list li {
|
|
|
|
+ animation: fade-in-item 0.4s linear forwards;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.active .menu-list li:nth-child(1) {
|
|
|
|
+ animation-delay: 0.1s;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.active .menu-list li:nth-child(2) {
|
|
|
|
+ animation-delay: 0.2s;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+.active .menu-list li:nth-child(3) {
|
|
|
|
+ animation-delay: 0.3s;
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+@keyframes fade-in-item {
|
|
|
|
+ 100% {
|
|
|
|
+ transform: translateX(0);
|
|
|
|
+ opacity: 1;
|
|
|
|
+ }
|
|
|
|
+}</style>
|