lunanting/jmalcloud-view
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化BreadcrumbFilePath

Browse Source
This commit is contained in:
jmal 2020-07-18 18:46:11 +08:00
parent a599bbd5b3
commit f24077f47a
1 changed files with 37 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/components/Breadcrumb/BreadcrumbFilePath.vue
View File

@ -1,47 +1,47 @@
<template> <template>
<span> <span>
<a v-if="strLength(item.folder) > 10"> <a v-if="strLength(item.folder) > maxNameLength">
<el-tooltip class="item" effect="dark" :content="item.folder" placement="top"> <el-tooltip class="item" effect="dark" :content="item.folder" placement="top">
<a v-if="pathList.length >= 7"> <a v-if="pathList.length >= maxPathCount">
<span v-if="index === pathList.length-6" class="redirect" >&nbsp;</span> <span v-if="index === pathList.length-maxPathCount-1" class="redirect" >&nbsp;</span>
<a v-if="index === pathList.length-6" class="redirect" v-on:click.prevent="handleLink(item,index)">...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a> <a v-if="index === pathList.length-maxPathCount-1" class="redirect" v-on:click.prevent="handleLink(item,index)">...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
<a v-if="index >= pathList.length-6 && index < pathList.length-1 && strLength(item.folder) <= 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a> <a v-if="index >= pathList.length-maxPathCount-1 && index < pathList.length-1 && strLength(item.folder) <= maxNameLength" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
<span v-if="index >= pathList.length-6 && index < pathList.length-1 && strLength(item.folder) > 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ substring10(item.folder) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></span> <span v-if="index >= pathList.length-maxPathCount-1 && index < pathList.length-1 && strLength(item.folder) > maxNameLength" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ substring(item.folder,maxNameLength) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></span>
</a> </a>
<a v-if="pathList.length < 7"> <a v-if="pathList.length < maxPathCount">
<a v-if="index < pathList.length-1 && strLength(item.folder) <= 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a> <a v-if="index < pathList.length-1 && strLength(item.folder) <= maxNameLength" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
<span v-if="index < pathList.length-1 && strLength(item.folder) > 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ substring10(item.folder) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></span> <span v-if="index < pathList.length-1 && strLength(item.folder) > maxNameLength" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ substring(item.folder,maxNameLength) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></span>
</a> </a>
<a v-if="index===pathList.length-1"> <a v-if="index===pathList.length-1">
<span v-if="strLength(item.folder) <= 20" class="no-redirect">{{ item.folder }}</span> <span v-if="strLength(item.folder) <= 20" class="no-redirect">{{ item.folder }}</span>
<span v-if="strLength(item.folder) > 20 && strLength(item.folder) <= 50 && item.searchKey" class="no-redirect">{{ item.folder }}</span> <span v-if="strLength(item.folder) > 20 && strLength(item.folder) <= maxNameLengthOfLast && item.searchKey" class="no-redirect">{{ item.folder }}</span>
<span v-if="strLength(item.folder) > 50 && item.searchKey" class="no-redirect">{{ substring10(item.folder) }}...</span> <span v-if="strLength(item.folder) > maxNameLengthOfLast && item.searchKey" class="no-redirect">{{ substring(item.folder,maxNameLength) }}...</span>
<span v-if="strLength(item.folder) > 20 && !item.searchKey" class="no-redirect">{{ substring(item.folder,20) }}...</span> <span v-if="strLength(item.folder) > 20 && !item.searchKey" class="no-redirect">{{ substring(item.folder,20) }}...</span>
</a> </a>
</el-tooltip> </el-tooltip>
</a> </a>
<a v-if="strLength(item.folder) <= 10"> <a v-if="strLength(item.folder) <= maxNameLength">
<a v-if="pathList.length >= 7"> <a v-if="pathList.length >= maxPathCount">
<span v-if="index === pathList.length-6" class="redirect" >&nbsp;</span> <span v-if="index === pathList.length-maxPathCount-1" class="redirect" >&nbsp;</span>
<a v-if="index === pathList.length-6" class="redirect" v-on:click.prevent="handleLink(item,index)">...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a> <a v-if="index === pathList.length-maxPathCount-1" class="redirect" v-on:click.prevent="handleLink(item,index)">...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
<a v-if="index >= pathList.length-6 && index < pathList.length-1 && strLength(item.folder) <= 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a> <a v-if="index > pathList.length-maxPathCount-1 && index < pathList.length-1 && strLength(item.folder) <= maxNameLength" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
<span v-if="index >= pathList.length-6 && index < pathList.length-1 && strLength(item.folder) > 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ substring10(item.folder) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></span> <span v-if="index >= pathList.length-maxPathCount-1 && index < pathList.length-1 && strLength(item.folder) > maxNameLength" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ substring(item.folder,maxNameLength) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></span>
</a> </a>
<a v-if="pathList.length < 7"> <a v-if="pathList.length < maxPathCount">
<a v-if="index < pathList.length-1 && strLength(item.folder) <= 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a> <a v-if="index < pathList.length-1 && strLength(item.folder) <= maxNameLength" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ item.folder }}<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></a>
<span v-if="index < pathList.length-1 && strLength(item.folder) > 10" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ substring10(item.folder) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></span> <span v-if="index < pathList.length-1 && strLength(item.folder) > maxNameLength" class="redirect" v-on:click.prevent="handleLink(item,index)">{{ substring(item.folder,maxNameLength) }}...<svg-icon style="font-size: 1rem;" icon-class="breadcrumb-right" /></span>
</a> </a>
<a v-if="index===pathList.length-1"> <a v-if="index===pathList.length-1">
<span v-if="strLength(item.folder) <= 10" class="no-redirect">{{ item.folder }}</span> <span v-if="strLength(item.folder) <= maxNameLength" class="no-redirect">{{ item.folder }}</span>
<span v-if="strLength(item.folder) > 10 && strLength(item.folder) <= 50 && item.searchKey" class="no-redirect">{{ item.folder }}</span> <span v-if="strLength(item.folder) > maxNameLength && strLength(item.folder) <= maxNameLengthOfLast && item.searchKey" class="no-redirect">{{ item.folder }}</span>
<span v-if="strLength(item.folder) > 50 && item.searchKey" class="no-redirect">{{ substring10(item.folder) }}...</span> <span v-if="strLength(item.folder) > maxNameLengthOfLast && item.searchKey" class="no-redirect">{{ substring(item.folder,maxNameLength) }}...</span>
<span v-if="strLength(item.folder) > 10 && !item.searchKey" class="no-redirect">{{ substring10(item.folder) }}...</span> <span v-if="strLength(item.folder) > maxNameLength && !item.searchKey" class="no-redirect">{{ substring(item.folder,maxNameLength) }}...</span>
</a> </a>
</a> </a>
</span> </span>
</template> </template>
<script> <script>
import { strlen, substring10,substring } from '@/utils/number' import { strlen,substring } from '@/utils/number'
export default { export default {
name: 'BreadcrumbFilePath', name: 'BreadcrumbFilePath',
props: { props: {
@ -52,6 +52,18 @@
// { 'folder': '+', index: 1 } // { 'folder': '+', index: 1 }
] ]
}, },
maxNameLength: {
type: Number,
default: 10
},
maxPathCount: {
type: Number,
default: 7
},
maxNameLengthOfLast: {
type: Number,
default: 50
},
index: { index: {
type: Number, type: Number,
default: 0 default: 0
@ -71,9 +83,6 @@
strLength(str) { strLength(str) {
return strlen(str) return strlen(str)
}, },
substring10(str) {
return substring10(str)
},
substring(str,n){ substring(str,n){
return substring(str,n) return substring(str,n)
}, },