mirror of
https://github.com/ZiuChen/ClipboardManager.git
synced 2025-06-07 13:54:05 +08:00
feat: 收藏、分词、删除功能初始化
This commit is contained in:
parent
a5074d9686
commit
a1d6f0cc95
@ -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,
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user