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

feat: 操作按钮改为图标展示 添加取消收藏按钮

Browse Source
This commit is contained in:
ZiuChen 2022-09-04 18:33:14 +08:00
parent e8204cb729
commit 096a9559ab
2 changed files with 16 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/cpns/ClipItemList.vue
View File

@ -48,18 +48,19 @@
</div> </div>
</div> </div>
<div class="clip-operate" v-show="activeIndex === index"> <div class="clip-operate" v-show="activeIndex === index">
<template v-for="{ id, title } of operation"> <template v-for="{ id, title, icon } of operation">
<div <div
v-if=" v-if="
(id !== 'collect' && id !== 'view') || (id !== 'collect' && id !== 'view' && id !== 'un-collect') ||
(id === 'collect' && item.collect !== true) || (id === 'collect' && item.collect !== true) ||
(id === 'un-collect' && item.collect === true) ||
(id === 'view' && item.type !== 'image') (id === 'view' && item.type !== 'image')
" "
:class="id" :class="id"
:title="title" :title="title"
@click.stop="handleOperateClick({ id, item })" @click.stop="handleOperateClick({ id, item })"
> >
{{ title.slice(0, 1) }} {{ icon }}
</div> </div>
</template> </template>
</div> </div>
@ -100,10 +101,11 @@ const handleDataClick = (item) => emit('onDataChange', item)
const activeIndex = ref(0) const activeIndex = ref(0)
const handleMouseOver = (index) => (activeIndex.value = index) const handleMouseOver = (index) => (activeIndex.value = index)
const operation = [ const operation = [
{ id: 'copy', title: '复制' }, { id: 'copy', title: '复制', icon: '📄' },
{ id: 'view', title: '查看全部' }, { id: 'view', title: '查看全部', icon: '💬' },
{ id: 'collect', title: '收藏' }, { id: 'collect', title: '收藏', icon: '⭐' },
{ id: 'remove', title: '删除' } { id: 'un-collect', title: '取消收藏', icon: '📤' },
{ id: 'remove', title: '删除', icon: '❌' }
] ]
const handleOperateClick = ({ id, item }) => { const handleOperateClick = ({ id, item }) => {
switch (id) { switch (id) {
@ -114,7 +116,11 @@ const handleOperateClick = ({ id, item }) => {
emit('onDataChange', item) emit('onDataChange', item)
break break
case 'collect': case 'collect':
item.collect = true // important item.collect = true
window.db.updateDataBaseLocal(db)
break
case 'un-collect':
item.collect = undefined
window.db.updateDataBaseLocal(db) window.db.updateDataBaseLocal(db)
break break
case 'remove': case 'remove':

3
src/style/cpns/clip-item-list.less
View File

@ -53,6 +53,7 @@
overflow: hidden; overflow: hidden;
word-break: break-all; word-break: break-all;
max-height: 150px; max-height: 150px;
max-width: 500px;
padding: 5px; padding: 5px;
white-space: pre-wrap; white-space: pre-wrap;
flex-direction: column; flex-direction: column;
@ -80,7 +81,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
min-width: 150px; min-width: 150px;
padding: 10px; padding: 0px 10px;
& * { & * {
display: flex; display: flex;
align-items: center; align-items: center;