修改标签栏样式
This commit is contained in:
parent
9467abc6c0
commit
fd88b2d6c1
@ -22,43 +22,33 @@
|
|||||||
</el-menu>
|
</el-menu>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
</div>
|
</div>
|
||||||
<div class="scrollbar-tag" :class="{ collapse: isCollapse }">标签</div>
|
<div v-if="showTag && tagList.length > 0" class="scrollbar-tag" :class="{ collapse: isCollapse }">标签</div>
|
||||||
<div class="scroll-decoration-top"></div>
|
<div class="scroll-decoration-top"></div>
|
||||||
<el-scrollbar class="tag-list" wrap-class="scrollbar-wrapper">
|
<el-scrollbar class="tag-list" wrap-class="scrollbar-wrapper">
|
||||||
<div v-if="isCollapse">
|
<div v-if="isCollapse">
|
||||||
<ul class="infinite-list">
|
<ul class="infinite-list">
|
||||||
<el-tooltip
|
<el-tooltip class="item"
|
||||||
class="item"
|
v-if="showTag"
|
||||||
effect="dark"
|
effect="dark"
|
||||||
:content="tag.name"
|
:content="tag.name"
|
||||||
placement="right"
|
placement="right"
|
||||||
v-for="tag in tagList"
|
v-for="tag in tagList"
|
||||||
:key="tag.tagId"
|
:key="tag.tagId">
|
||||||
>
|
|
||||||
<li class="infinite-list-item collapse">
|
<li class="infinite-list-item collapse">
|
||||||
<svg-icon
|
<svg-icon :style="{ color: tag.color, fontSize: '14px' }" icon-class="tag2"></svg-icon>
|
||||||
:style="{ color: tag.color, fontSize: '14px' }"
|
|
||||||
icon-class="tag2"
|
|
||||||
></svg-icon>
|
|
||||||
</li>
|
</li>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<ul class="infinite-list">
|
<ul class="infinite-list">
|
||||||
<li
|
<li v-for="tag in tagList"
|
||||||
v-for="tag in tagList"
|
v-if="showTag"
|
||||||
:key="tag.id"
|
:key="tag.id"
|
||||||
class="infinite-list-item"
|
class="infinite-list-item"
|
||||||
@click="tagClick(tag)"
|
@click="tagClick(tag)">
|
||||||
>
|
<svg-icon :style="{ color: tag.color, fontSize: '14px' }" icon-class="tag2"></svg-icon>
|
||||||
<!-- <router-link :to="'/tag?tagId=' + tag.id" @click.native="tagClick(tag)">-->
|
|
||||||
<svg-icon
|
|
||||||
:style="{ color: tag.color, fontSize: '14px' }"
|
|
||||||
icon-class="tag2"
|
|
||||||
></svg-icon>
|
|
||||||
<span>{{ tag.name }}</span>
|
<span>{{ tag.name }}</span>
|
||||||
<!-- </router-link>-->
|
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@ -125,6 +115,7 @@ export default {
|
|||||||
showCopyBtn: false,
|
showCopyBtn: false,
|
||||||
takeUpSpace: 0,
|
takeUpSpace: 0,
|
||||||
tagList: [],
|
tagList: [],
|
||||||
|
showTag: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -173,18 +164,28 @@ export default {
|
|||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
isCollapse(val){
|
isCollapse(val){
|
||||||
|
},
|
||||||
|
$route(to) {
|
||||||
|
console.log(to.meta.menuType)
|
||||||
|
this.showTag = to.meta !== undefined && to.meta.menuType !== undefined && to.meta.menuType === 0;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
tagApi.tagList({userId: this.$store.state.user.userId,}).then(res => {
|
this.getTagList()
|
||||||
this.tagList = res.data
|
|
||||||
})
|
|
||||||
Bus.$on('msg/file/change', (msg) => this.onmessage(msg))
|
Bus.$on('msg/file/change', (msg) => this.onmessage(msg))
|
||||||
},
|
},
|
||||||
destroyed() {
|
destroyed() {
|
||||||
Bus.$off('msg/file/change')
|
Bus.$off('msg/file/change')
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
getTagList() {
|
||||||
|
if (this.$route.meta.menuType === 0) {
|
||||||
|
this.showTag = true
|
||||||
|
}
|
||||||
|
tagApi.tagList({userId: this.$store.state.user.userId}).then(res => {
|
||||||
|
this.tagList = res.data
|
||||||
|
})
|
||||||
|
},
|
||||||
onmessage(msg) {
|
onmessage(msg) {
|
||||||
const takeUpSpace = msg.space
|
const takeUpSpace = msg.space
|
||||||
if (takeUpSpace) {
|
if (takeUpSpace) {
|
||||||
@ -293,6 +294,24 @@ export default {
|
|||||||
.el-scrollbar {
|
.el-scrollbar {
|
||||||
padding-bottom: 15px;
|
padding-bottom: 15px;
|
||||||
}
|
}
|
||||||
|
>>> .submenu-title-noDropdown {
|
||||||
|
padding-left: 15px !important;
|
||||||
|
padding-right: 10px !important;
|
||||||
|
}
|
||||||
|
>>> .el-submenu__title {
|
||||||
|
padding-left: 15px !important;
|
||||||
|
padding-right: 10px !important;
|
||||||
|
.el-submenu__icon-arrow {
|
||||||
|
right: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>>> .nest-menu {
|
||||||
|
.el-menu-item {
|
||||||
|
padding-left: 25px !important;
|
||||||
|
padding-right: 20px !important;
|
||||||
|
min-width: unset;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.quota-space {
|
.quota-space {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|||||||
@ -9,7 +9,7 @@ $menuHover:#d9d9d9;
|
|||||||
$subMenuBg:#f5f5f5;
|
$subMenuBg:#f5f5f5;
|
||||||
$subMenuHover:#d9d9d9;
|
$subMenuHover:#d9d9d9;
|
||||||
|
|
||||||
$sideBarWidth: 150px;
|
$sideBarWidth: 160px;
|
||||||
|
|
||||||
// the :export directive is the magic sauce for webpack
|
// the :export directive is the magic sauce for webpack
|
||||||
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
|
||||||
|
|||||||
@ -13,7 +13,7 @@
|
|||||||
<el-tab-pane label="基本设置" name="1">
|
<el-tab-pane label="基本设置" name="1">
|
||||||
<div v-if="activeName === '1'">
|
<div v-if="activeName === '1'">
|
||||||
<div class="config-itme-label">网盘名称:
|
<div class="config-itme-label">网盘名称:
|
||||||
<el-input placeholder="请输入网盘名称" v-model="netdiskName" minlength="1" maxlength="8" size="medium"
|
<el-input placeholder="请输入网盘名称" v-model="netdiskName" minlength="1" maxlength="10" size="medium"
|
||||||
:style="{width: inputNetdiskNameWidth+'px'}"
|
:style="{width: inputNetdiskNameWidth+'px'}"
|
||||||
@keyup.enter.native="updateNetdiskName" @input="inputNetdiskName">
|
@keyup.enter.native="updateNetdiskName" @input="inputNetdiskName">
|
||||||
<el-button v-if="showAckBtn" slot="append" icon="el-icon-check" @click="updateNetdiskName"></el-button>
|
<el-button v-if="showAckBtn" slot="append" icon="el-icon-check" @click="updateNetdiskName"></el-button>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user