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

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,

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;
+        }
+      }
+    }
   }
 }