feat: 移除more按钮 改为显示在data左上角的div

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

View File

@ -13,28 +13,32 @@
</div>
<div class="clip-data">
<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() }}
</template>
<template v-if="item.type === '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 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)" />
</template>
</div>
</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>
</template>
@ -60,9 +64,7 @@ const handleItemClick = (ev, item) => {
window.copy(item)
}
}
const onDataChange = (item) => {
emit('onDataChange', item)
}
const handleDataClick = (item) => emit('onDataChange', item)
</script>
<style lang="less" scoped>

View File

@ -46,9 +46,10 @@
img {
max-height: 150px;
}
.clip-image-size {
.clip-data-status {
position: absolute;
background-color: @bg-color;
color: @bg-color;
background-color: @text-color;
}
}
}
@ -62,18 +63,5 @@
color: @text-color-lighter;
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;
}
}
}