From a1d6f0cc95fd7ceec69b616fbfdfc05c2f514005 Mon Sep 17 00:00:00 2001
From: ZiuChen <457353192@qq.com>
Date: Sun, 4 Sep 2022 10:54:35 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=94=B6=E8=97=8F=E3=80=81=E5=88=86?=
 =?UTF-8?q?=E8=AF=8D=E3=80=81=E5=88=A0=E9=99=A4=E5=8A=9F=E8=83=BD=E5=88=9D?=
 =?UTF-8?q?=E5=A7=8B=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/cpns/ClipItemList.vue          | 35 +++++++++++++++++++++++++++++-
 src/style/cpns/clip-item-list.less | 24 ++++++++++++++++++++
 2 files changed, 58 insertions(+), 1 deletion(-)

diff --git a/src/cpns/ClipItemList.vue b/src/cpns/ClipItemList.vue
index e2272cc..1078997 100644
--- a/src/cpns/ClipItemList.vue
+++ b/src/cpns/ClipItemList.vue
@@ -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,
diff --git a/src/style/cpns/clip-item-list.less b/src/style/cpns/clip-item-list.less
index a3fa096..57d9a74 100644
--- a/src/style/cpns/clip-item-list.less
+++ b/src/style/cpns/clip-item-list.less
@@ -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;
+        }
+      }
+    }
   }
 }