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 @@ -
{{ index + 1 }}
+
+ +
+
+ {{ index + 1 }} +
@@ -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; + } + } + } } }