mirror of
https://github.com/ZiuChen/ClipboardManager.git
synced 2025-06-07 13:54:05 +08:00
feat: 调整导航栏图标
This commit is contained in:
parent
78192c8003
commit
15a16071f6
@ -6,6 +6,7 @@
|
||||
:class="{ 'clip-switch-item': true, active: activeTab === tab.type }"
|
||||
@click="onNavClick(tab.type)"
|
||||
>
|
||||
<component :is="tab.icon"></component>
|
||||
{{ tab.name }}
|
||||
</div>
|
||||
</template>
|
||||
@ -16,14 +17,15 @@
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { Menu, Tickets, Picture, Document, Collection } from '@element-plus/icons-vue'
|
||||
|
||||
const tabs = ref([
|
||||
{ name: '📚 全部', type: 'all' },
|
||||
{ name: '📋 文字', type: 'text' },
|
||||
{ name: '⛺ 图片', type: 'image' },
|
||||
{ name: '📂 文件', type: 'file' },
|
||||
{ name: '⭐ 收藏', type: 'collect' }
|
||||
])
|
||||
const tabs = [
|
||||
{ name: '全部', type: 'all', icon: Menu },
|
||||
{ name: '文字', type: 'text', icon: Tickets },
|
||||
{ name: '图片', type: 'image', icon: Picture },
|
||||
{ name: '文件', type: 'file', icon: Document },
|
||||
{ name: '收藏', type: 'collect', icon: Collection }
|
||||
]
|
||||
const activeTab = ref('all')
|
||||
const emit = defineEmits(['onNavClick'])
|
||||
const toggleNav = (type) => (activeTab.value = type)
|
||||
|
@ -14,6 +14,9 @@
|
||||
color: @primary-color;
|
||||
background-color: @bg-color;
|
||||
transition: all 0.15s ease-in-out;
|
||||
svg {
|
||||
fill: @primary-color;
|
||||
}
|
||||
}
|
||||
.clip-switch-items {
|
||||
display: flex;
|
||||
@ -22,6 +25,10 @@
|
||||
flex-direction: row;
|
||||
margin-left: 5px;
|
||||
.clip-switch-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 58px;
|
||||
padding: 10px 15px 10px 15px;
|
||||
margin: 10px 5px 10px 5px;
|
||||
cursor: pointer;
|
||||
@ -32,6 +39,11 @@
|
||||
background-color: @nav-hover-bg-color;
|
||||
transition: all 0.15s ease-in-out;
|
||||
}
|
||||
svg {
|
||||
margin-right: 5px;
|
||||
max-width: 30%;
|
||||
fill: @text-color-lighter;
|
||||
}
|
||||
}
|
||||
}
|
||||
.clip-switch-btn-list {
|
||||
|
Loading…
x
Reference in New Issue
Block a user