💄文件图标上添加分享图标
This commit is contained in:
jmal
parent
4b8938d8d8
commit
b0e56ec12f
@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<span>
|
||||
<svg-icon v-if="item.isShare" class="share-dir" icon-class="share"/>
|
||||
<a v-if="strLength(item.folder) > maxNameLength">
|
||||
<el-tooltip class="item" effect="dark" :content="item.folder" placement="top">
|
||||
<a v-if="pathList.length >= maxPathCount">
|
||||
@ -93,6 +94,11 @@
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.share-dir {
|
||||
color: #52c41a;
|
||||
margin-right: -0.5rem;
|
||||
font-size: 1.2rem !important;
|
||||
}
|
||||
.redirect {
|
||||
color: #97a8be;
|
||||
}
|
||||
|
||||
@ -1,30 +1,38 @@
|
||||
<template>
|
||||
<span>
|
||||
<div v-if="item.isFavorite && !public">
|
||||
<div v-if="pc">
|
||||
<svg-icon v-if="!grid" class="favorite" icon-class="menu-favorite-hover"
|
||||
style="font-size: 1rem;float: right;margin-left: 1rem;position: absolute;"/>
|
||||
<svg-icon v-if="grid" class="favorite" icon-class="menu-favorite-hover"
|
||||
style="font-size: 1.5rem;right: 0;top: -1rem;position: absolute;z-index: 1;"/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<svg-icon v-if="!grid" class="favorite" icon-class="menu-favorite-hover"
|
||||
style="font-size: 0.5rem;float: right;margin-left: 0.5rem;position: absolute;"/>
|
||||
<svg-icon v-if="grid" class="favorite" icon-class="menu-favorite-hover"
|
||||
style="font-size: 1rem;right: 0;top: -1rem;position: absolute;z-index: 1;"/>
|
||||
</div>
|
||||
<div v-if="item.isFavorite && !public">
|
||||
<div v-if="pc">
|
||||
<svg-icon v-if="!grid" class="pc list icon-favorite" icon-class="Favoritestarrate"/>
|
||||
<svg-icon v-if="grid" class="pc grid icon-favorite" icon-class="Favoritestarrate"/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<svg-icon v-if="!grid" class="mobile list icon-favorite" icon-class="Favoritestarrate"/>
|
||||
<svg-icon v-if="grid" class="mobile grid icon-favorite" icon-class="Favoritestarrate"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.isShare && item.shareId && !public">
|
||||
<div v-if="pc">
|
||||
<svg-icon v-if="!grid" class="pc list icon-share" icon-class="share"/>
|
||||
<svg-icon v-if="grid" class="pc grid icon-share" icon-class="share"/>
|
||||
</div>
|
||||
<div v-else>
|
||||
<svg-icon v-if="!grid" class="mobile list icon-share" icon-class="share"/>
|
||||
<svg-icon v-if="grid" class="mobile grid icon-share" icon-class="share"/>
|
||||
</div>
|
||||
</div>
|
||||
<svg-icon v-if="item.isFolder" icon-class="folder"/>
|
||||
<svg-icon v-else-if="item.contentType.indexOf('video') > -1" icon-class="video"/>
|
||||
<div v-else-if="item.contentType.indexOf('audio') > -1" v-on:mousedown="noDrag($event)">
|
||||
<div v-if="item.music !== undefined">
|
||||
<div v-if="item.music.name !== null">
|
||||
<el-image v-if="grid" :style="{'height':details?'110px':(gridWidth-35) + 'px'}" fit="contain" :src="item.fileId ? (audioCoverUrl+item.fileId) : (audioCoverUrl+item.id)">
|
||||
<el-image v-if="grid" :style="{'height':details?'110px':(gridWidth-35) + 'px'}" fit="contain"
|
||||
:src="item.fileId ? (audioCoverUrl+item.fileId) : (audioCoverUrl+item.id)">
|
||||
<div slot="error" class="image-slot">
|
||||
<svg-icon class="avatar-default-image" icon-class="audio"/>
|
||||
</div>
|
||||
</el-image>
|
||||
<el-avatar v-if="!grid" shape="square" :src="item.fileId ? (audioCoverUrl+item.fileId) : (audioCoverUrl+item.id)">
|
||||
<el-avatar v-if="!grid" shape="square"
|
||||
:src="item.fileId ? (audioCoverUrl+item.fileId) : (audioCoverUrl+item.id)">
|
||||
<div slot="default">
|
||||
<svg-icon class="avatar-default-image" icon-class="audio"/>
|
||||
</div>
|
||||
@ -35,13 +43,15 @@
|
||||
</div>
|
||||
<!--<svg-icon v-else-if="item.contentType.indexOf('text') > -1" icon-class="file-txt"/>-->
|
||||
<div v-else-if="item.contentType.startsWith('image')" v-on:mousedown="noDrag($event)">
|
||||
<el-image v-if="grid || grid === 'details'" :style="{'height':details?'110px':(gridWidth-35) + 'px'}" fit="contain" :src="item.fileId ? (imageUrl+item.fileId) : (imageUrl+item.id)">
|
||||
<el-image v-if="grid || grid === 'details'" :style="{'height':details?'110px':(gridWidth-35) + 'px'}"
|
||||
fit="contain" :src="item.fileId ? (imageUrl+item.fileId) : (imageUrl+item.id)">
|
||||
<div slot="error" class="image-slot">
|
||||
<svg-icon icon-class="loading-image-error"/>
|
||||
</div>
|
||||
</el-image>
|
||||
|
||||
<el-avatar v-if="!grid" shape="square" :src="item.fileId ? (imageUrl+item.fileId) : (imageUrl+item.id)"></el-avatar>
|
||||
<el-avatar v-if="!grid" shape="square"
|
||||
:src="item.fileId ? (imageUrl+item.fileId) : (imageUrl+item.id)"></el-avatar>
|
||||
</div>
|
||||
<!--<svg-icon v-else-if="item.contentType.indexOf('application/pdf') > -1" icon-class="file-pdf"/>-->
|
||||
<!--<svg-icon v-else-if="item.contentType.indexOf('word') > -1" icon-class="file-word"/>-->
|
||||
@ -51,72 +61,128 @@
|
||||
</span>
|
||||
</template>
|
||||
<script>
|
||||
import { iconClass } from '@/utils/file-type'
|
||||
export default {
|
||||
name: 'IconFile',
|
||||
props: {
|
||||
imageUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
audioCoverUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
grid: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
gridWidth: {
|
||||
type: Number,
|
||||
default: 120
|
||||
},
|
||||
details: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
public: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
import {iconClass} from '@/utils/file-type'
|
||||
|
||||
export default {
|
||||
name: 'IconFile',
|
||||
props: {
|
||||
imageUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pc: window.pc,
|
||||
}
|
||||
audioCoverUrl: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
mounted() {
|
||||
grid: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
computed: {
|
||||
findIconClass(){
|
||||
let suffix = this.item.suffix;
|
||||
if(!suffix && this.item.fileName){
|
||||
suffix = this.item.fileName.substring(this.item.fileName.lastIndexOf('.') + 1);
|
||||
}
|
||||
if(iconClass.has(suffix)){
|
||||
return iconClass.get(suffix)
|
||||
}
|
||||
return 'file'
|
||||
},
|
||||
gridWidth: {
|
||||
type: Number,
|
||||
default: 120
|
||||
},
|
||||
methods: {
|
||||
noDrag(e) {
|
||||
// console.log('noDrag',e)
|
||||
// e.preventDefault()
|
||||
details: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
public: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
item: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pc: window.pc,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
computed: {
|
||||
findIconClass() {
|
||||
let suffix = this.item.suffix;
|
||||
if (!suffix && this.item.fileName) {
|
||||
suffix = this.item.fileName.substring(this.item.fileName.lastIndexOf('.') + 1);
|
||||
}
|
||||
if (iconClass.has(suffix)) {
|
||||
return iconClass.get(suffix)
|
||||
}
|
||||
return 'file'
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
noDrag(e) {
|
||||
// console.log('noDrag',e)
|
||||
// e.preventDefault()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.avatar-default-image{
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
line-height: 35px;
|
||||
}
|
||||
.avatar-default-image {
|
||||
height: 35px;
|
||||
width: 35px;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
.icon-favorite {
|
||||
position: absolute;
|
||||
color: #f5222d;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.pc.grid.icon-favorite {
|
||||
font-size: 1.5rem;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.mobile.grid.icon-favorite {
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
}
|
||||
|
||||
.pc.list.icon-favorite {
|
||||
font-size: 1rem;
|
||||
left: 1.5rem;
|
||||
}
|
||||
|
||||
.mobile.list.icon-favorite {
|
||||
font-size: 0.5rem;
|
||||
margin-left: -1.5rem;
|
||||
}
|
||||
|
||||
.icon-share {
|
||||
color: #52c41a;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.pc.grid.icon-share {
|
||||
font-size: 1.5rem;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.mobile.grid.icon-share {
|
||||
width: 1.3rem;
|
||||
height: 1.3rem;
|
||||
margin-left: 2.8rem;
|
||||
}
|
||||
|
||||
.pc.list.icon-share {
|
||||
font-size: 1rem;
|
||||
right: 1.3rem;
|
||||
}
|
||||
|
||||
.mobile.list.icon-share {
|
||||
font-size: 0.5rem;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -2520,7 +2520,7 @@ export default {
|
||||
menuFavoriteLeave(index, isFavorite) {
|
||||
this.highlightFavorite(this.isCollectView ? true : isFavorite, false)
|
||||
},
|
||||
// 是否高亮收图标
|
||||
// 是否高亮收藏图标
|
||||
highlightFavorite(isFavorite, isHover) {
|
||||
const item_menu = this.menus.find(item => {
|
||||
if (item.operation === 'favorite' || item.operation === 'unFavorite') {
|
||||
@ -2901,10 +2901,17 @@ export default {
|
||||
isFolder: row.isFolder
|
||||
}).then(res => {
|
||||
this.shareDialog = true
|
||||
// 这3行代码是为了让vue刷新数据
|
||||
const isFavorite = this.rowContextData.isFavorite
|
||||
this.rowContextData.isFavorite = !isFavorite
|
||||
this.rowContextData.isFavorite = isFavorite
|
||||
if (res.data) {
|
||||
this.shareLink = window.location.origin + '/s?s=' + res.data
|
||||
let shareId = res.data
|
||||
this.shareLink = window.location.origin + '/s?s=' + shareId
|
||||
this.generateShareLinkLoading = false
|
||||
this.rowContextData.shareId = shareId
|
||||
}
|
||||
this.rowContextData.isShare = true
|
||||
}).catch(() => {
|
||||
this.shareDialog = false
|
||||
this.generateShareLinkLoading = false
|
||||
@ -3137,7 +3144,7 @@ export default {
|
||||
} else {
|
||||
this.path = '/' + row.name
|
||||
}
|
||||
const item = {'folder': row.name}
|
||||
const item = {'folder': row.name, 'isShare': row.isShare}
|
||||
this.pathList.push(item)
|
||||
this.pagination.pageIndex = 1
|
||||
const path = encodeURI(this.path);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user