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: 移除more按钮 改为显示在data左上角的div

Browse Source
This commit is contained in:
ZiuChen 2022-08-15 17:27:09 +08:00
parent 86b13fd67f
commit a21882a250
2 changed files with 19 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/cpns/ClipItemList.vue
View File

@ -13,28 +13,32 @@
</div> </div>
<div class="clip-data"> <div class="clip-data">
<template v-if="item.type === 'text'"> <template v-if="item.type === 'text'">
<div
class="clip-data-status"
v-if="item.data.length >= 500"
@click.stop="handleDataClick(item)"
>
点此查看全部>>
</div>
{{ item.data.slice(0, 500).trim() }} {{ item.data.slice(0, 500).trim() }}
</template> </template>
<template v-if="item.type === 'image'"> <template v-if="item.type === 'image'">
<img :src="item.data" alt="Image" /> <img :src="item.data" alt="Image" />
<div class="clip-image-size">{{ item.size }}</div> <div class="clip-data-status">{{ item.size }}</div>
</template> </template>
<template v-if="item.type === 'file'"> <template v-if="item.type === 'file'">
<div
class="clip-data-status"
v-if="JSON.parse(item.data).length >= 8"
@click.stop="handleDataClick(item)"
>
点此查看全部>>
</div>
<FileList :data="JSON.parse(item.data)" /> <FileList :data="JSON.parse(item.data)" />
</template> </template>
</div> </div>
</div> </div>
<div class="clip-count">{{ index + 1 }}</div> <div class="clip-count">{{ index + 1 }}</div>
<div
class="clip-more"
v-if="
(item.type === 'text' && item.data.length >= 500) ||
(item.type === 'file' && JSON.parse(item.data).length >= 8)
"
@click.stop="onDataChange(item)"
>
📃
</div>
</div> </div>
</div> </div>
</template> </template>
@ -60,9 +64,7 @@ const handleItemClick = (ev, item) => {
window.copy(item) window.copy(item)
} }
} }
const onDataChange = (item) => { const handleDataClick = (item) => emit('onDataChange', item)
emit('onDataChange', item)
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>

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

@ -46,9 +46,10 @@
img { img {
max-height: 150px; max-height: 150px;
} }
.clip-image-size { .clip-data-status {
position: absolute; position: absolute;
background-color: @bg-color; color: @bg-color;
background-color: @text-color;
} }
} }
} }
@ -62,18 +63,5 @@
color: @text-color-lighter; color: @text-color-lighter;
padding: 10px; padding: 10px;
} }
.clip-more {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
font-size: 13px;
cursor: pointer;
border-radius: 0px 5px 5px 0px;
}
.clip-more:hover {
background-color: @text-bg-color;
transition: all 0.15s;
}
} }
} }