feat: 收藏、分词、删除功能初始化

This commit is contained in:
ZiuChen 2022-09-04 10:54:35 +08:00
parent a5074d9686
commit a1d6f0cc95
2 changed files with 58 additions and 1 deletions

View File

@ -47,7 +47,16 @@
</template>
</div>
</div>
<div class="clip-count">{{ index + 1 }}</div>
<div class="clip-operate" v-show="activeIndex === index">
<template v-for="{ id, title } of operation">
<div :class="id" :title="title" @click.stop="handleOperateClick({ id, item })">
{{ title.slice(0, 1) }}
</div>
</template>
</div>
<div class="clip-count" v-show="activeIndex !== index">
{{ index + 1 }}
</div>
</div>
</div>
</template>
@ -81,6 +90,30 @@ const handleItemClick = (ev, item) => {
const handleDataClick = (item) => emit('onDataChange', item)
const activeIndex = ref(0)
const handleMouseOver = (index) => (activeIndex.value = index)
const operation = [
{
id: 'collect',
title: '收藏'
},
{
id: 'big-bang',
title: '分词'
},
{
id: 'delete',
title: '删除'
}
]
const handleOperateClick = (type) => {
switch (type) {
case 'collect':
break
case 'big-bang':
break
case 'remove':
break
}
}
// getter
watch(
() => props.showList,

View File

@ -70,5 +70,29 @@
color: @text-color-lighter;
padding: 10px;
}
.clip-operate {
display: flex;
align-items: center;
justify-content: center;
min-width: 100px;
padding: 10px;
& * {
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: @text-color-lighter;
background: @text-bg-color;
margin: 0px 5px;
border-radius: 5px;
width: 30px;
height: 30px;
&:hover {
color: @bg-color;
background: @primary-color;
transition: all 0.15s;
}
}
}
}
}