|
|
@@ -0,0 +1,221 @@
|
|
|
+<template>
|
|
|
+ <div :class="menuStyle" @mouseover="mouseover" @mouseout="mouseout">
|
|
|
+ <div class="menu-button" @click="getMenu">
|
|
|
+ <div class="line-box">
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="line"></div>
|
|
|
+ <div class="line"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <ul class="menu-list" >
|
|
|
+ <li @click="downLoad"><i class="fa el-icon-download"></i><span>下载</span></li>
|
|
|
+ <li @click="preview"><i class="fa el-icon-view"></i><span>预览</span></li>
|
|
|
+ <li @click="delFile"><i class="fa el-icon-delete"></i><span>删除</span></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { downLoad2 } from '@/utils'
|
|
|
+
|
|
|
+export default {
|
|
|
+ props:['data'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ menuStyle:'menu-box',
|
|
|
+ active:false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ getMenu(){
|
|
|
+ // if(!this.active){
|
|
|
+ // this.menuStyle = 'menu-box active'
|
|
|
+ // this.$emit('getKey',this.data.id)
|
|
|
+ // }else{
|
|
|
+ // this.menuStyle = 'menu-box'
|
|
|
+ // }
|
|
|
+ // this.active = !this.active
|
|
|
+ },
|
|
|
+ mouseover(){
|
|
|
+ this.menuStyle = 'menu-box active'
|
|
|
+ this.active = true
|
|
|
+ },
|
|
|
+ mouseout(){
|
|
|
+ this.menuStyle = 'menu-box'
|
|
|
+ this.active = false
|
|
|
+ },
|
|
|
+ downLoad(){
|
|
|
+ downLoad2(this.data.url)
|
|
|
+ },
|
|
|
+ preview(){
|
|
|
+ var item = this.data
|
|
|
+ var arr = ['png','jpeg','bmp','jpg']
|
|
|
+ if(arr.includes(item.suffix)){
|
|
|
+ var FileUrl = this.$p + item.url
|
|
|
+ var isPicture = 1
|
|
|
+ }else if(item.suffix == 'pdf'){
|
|
|
+ var FileUrl = this.$p + item.url
|
|
|
+ var isPicture = 0
|
|
|
+ }else{
|
|
|
+ var FileUrl = 'http://192.168.1.24:8012/onlinePreview?url='+ btoa(encodeURIComponent(this.$p + item.url))
|
|
|
+ var isPicture = 0
|
|
|
+ }
|
|
|
+ const router = this.$router.resolve({
|
|
|
+ path: '/checkFile',
|
|
|
+ query: {
|
|
|
+ row: JSON.stringify(item),
|
|
|
+ FileUrl: FileUrl,
|
|
|
+ isPicture:isPicture
|
|
|
+ }
|
|
|
+ })
|
|
|
+ window.open(router.href, '_blank');
|
|
|
+ },
|
|
|
+ delFile(){
|
|
|
+ this.$emit('delFile',this.data.id)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .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: 1;
|
|
|
+ // 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-list{
|
|
|
+ width: 80px;
|
|
|
+ // height: 160px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid rgb(172, 169, 169);
|
|
|
+ list-style: none;
|
|
|
+ padding: 6px;
|
|
|
+ // box-shadow: 0 0 4px 4px rgba(92,103,255,0.15);
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ bottom: 10px;
|
|
|
+ opacity: 0;
|
|
|
+ transform: scale(0);
|
|
|
+ transform-origin: bottom right;
|
|
|
+ transition: 0.3s ease;
|
|
|
+ transition: delay 0.3s;
|
|
|
+ }
|
|
|
+ .menu-list li{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ // padding: 10px;
|
|
|
+ color: #343470;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ opacity: 0;
|
|
|
+ transform: translateX(-10px);
|
|
|
+ transition: 0.2s ease-in;
|
|
|
+ }
|
|
|
+ .menu-list li:hover{
|
|
|
+ color: #5c67ff;
|
|
|
+ }
|
|
|
+ .menu-list li::before{
|
|
|
+ content: '';
|
|
|
+ width: calc(100% - 24px);
|
|
|
+ height: 1px;
|
|
|
+ background-color: rgba(92,103,255,0.1);
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ left: 12px;
|
|
|
+ }
|
|
|
+ .menu-list li:last-child::before{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .menu-list .fa{
|
|
|
+ font-size: 18px;
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .menu-list 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>
|
