study/ClipboardManager
1
0
Fork 0
mirror of https://github.com/ZiuChen/ClipboardManager.git synced 2025-06-07 22:04:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 调整导航栏图标

Browse Source
This commit is contained in:
ZiuChen 2022-09-20 20:11:17 +08:00
parent 78192c8003
commit 15a16071f6
2 changed files with 21 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/cpns/ClipSwitch.vue
View File

@ -6,6 +6,7 @@
:class="{ 'clip-switch-item': true, active: activeTab === tab.type }" :class="{ 'clip-switch-item': true, active: activeTab === tab.type }"
@click="onNavClick(tab.type)" @click="onNavClick(tab.type)"
> >
<component :is="tab.icon"></component>
{{ tab.name }} {{ tab.name }}
</div> </div>
</template> </template>
@ -16,14 +17,15 @@
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
import { Menu, Tickets, Picture, Document, Collection } from '@element-plus/icons-vue'
const tabs = ref([ const tabs = [
{ name: '📚 全部', type: 'all' }, { name: '全部', type: 'all', icon: Menu },
{ name: '📋 文字', type: 'text' }, { name: '文字', type: 'text', icon: Tickets },
{ name: '⛺ 图片', type: 'image' }, { name: '图片', type: 'image', icon: Picture },
{ name: '📂 文件', type: 'file' }, { name: '文件', type: 'file', icon: Document },
{ name: '⭐ 收藏', type: 'collect' } { name: '收藏', type: 'collect', icon: Collection }
]) ]
const activeTab = ref('all') const activeTab = ref('all')
const emit = defineEmits(['onNavClick']) const emit = defineEmits(['onNavClick'])
const toggleNav = (type) => (activeTab.value = type) const toggleNav = (type) => (activeTab.value = type)

12
src/style/cpns/clip-switch.less
View File

@ -14,6 +14,9 @@
color: @primary-color; color: @primary-color;
background-color: @bg-color; background-color: @bg-color;
transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;
svg {
fill: @primary-color;
}
} }
.clip-switch-items { .clip-switch-items {
display: flex; display: flex;
@ -22,6 +25,10 @@
flex-direction: row; flex-direction: row;
margin-left: 5px; margin-left: 5px;
.clip-switch-item { .clip-switch-item {
display: flex;
align-items: center;
justify-content: center;
min-width: 58px;
padding: 10px 15px 10px 15px; padding: 10px 15px 10px 15px;
margin: 10px 5px 10px 5px; margin: 10px 5px 10px 5px;
cursor: pointer; cursor: pointer;
@ -32,6 +39,11 @@
background-color: @nav-hover-bg-color; background-color: @nav-hover-bg-color;
transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out;
} }
svg {
margin-right: 5px;
max-width: 30%;
fill: @text-color-lighter;
}
} }
} }
.clip-switch-btn-list { .clip-switch-btn-list {