update 优化 tags-view左右滚动按钮根据需要是否可滚动显示
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="tags-view-container" class="tags-view-container">
|
<div id="tags-view-container" class="tags-view-container">
|
||||||
<span class="tags-nav-btn tags-nav-btn--left" :class="{ disabled: !canScrollLeft }" @click="scrollLeft">
|
<span v-if="canScrollLeft" class="tags-nav-btn tags-nav-btn--left" @click="scrollLeft">
|
||||||
<el-icon><ArrowLeft /></el-icon>
|
<el-icon><ArrowLeft /></el-icon>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
@@ -24,7 +24,7 @@
|
|||||||
</router-link>
|
</router-link>
|
||||||
</scroll-pane>
|
</scroll-pane>
|
||||||
|
|
||||||
<span class="tags-nav-btn tags-nav-btn--right" :class="{ disabled: !canScrollRight }" @click="scrollRight">
|
<span v-if="canScrollRight" class="tags-nav-btn tags-nav-btn--right" @click="scrollRight">
|
||||||
<el-icon><ArrowRight /></el-icon>
|
<el-icon><ArrowRight /></el-icon>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
@@ -423,7 +423,6 @@ onBeforeUnmount(() => {
|
|||||||
$btn-color: #71717a;
|
$btn-color: #71717a;
|
||||||
$btn-hover-bg: var(--el-fill-color-light);
|
$btn-hover-bg: var(--el-fill-color-light);
|
||||||
$btn-hover-color: var(--el-text-color-primary);
|
$btn-hover-color: var(--el-text-color-primary);
|
||||||
$btn-disabled-color: #c0c4cc;
|
|
||||||
|
|
||||||
.tags-nav-btn {
|
.tags-nav-btn {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
@@ -452,11 +451,6 @@ onBeforeUnmount(() => {
|
|||||||
box-shadow: var(--app-shadow-sm);
|
box-shadow: var(--app-shadow-sm);
|
||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.disabled {
|
|
||||||
color: $btn-disabled-color;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tags-nav-btn--left {
|
.tags-nav-btn--left {
|
||||||
|
|||||||
Reference in New Issue
Block a user