收藏标签的右键菜单

src/views/collect/index.vue

@@ -3,20 +3,32 @@
     <!-- 标签 -->
     <div class="tags">
       <!-- TODO 标签可以拖动位置 -->
-      <el-tabs
-        v-model="clickCollect"
-        class="demo-tabs"
-        @tab-click="changeSearchFor"
-      >
+      <el-tabs v-model="clickCollect" class="demo-tabs">
         <el-tab-pane label="常用" name="first"></el-tab-pane>
         <el-tab-pane label="默认" name="second"></el-tab-pane>
         <el-tab-pane
           v-for="item in tabList"
           :key="item.labelId"
-          :label="item.labelName"
           :name="item.labelId"
-          @contextmenu.prevent="checkRight($event, item)"
-        ></el-tab-pane>
+        >
+          <template #label>
+            <div
+              v-if="isChangeTabName !== item.labelId"
+              @click.right="tabClick($event, item)"
+            >
+              {{ item.labelName }}
+            </div>
+            <div v-else>
+              <el-input
+                v-model="changeTabName"
+                size="mini"
+                @blur="reTabName"
+                maxlength="32"
+                :autofocus="true"
+              ></el-input>
+            </div>
+          </template>
+        </el-tab-pane>
       </el-tabs>
       <!-- 添加标签 -->
       <div class="addCollect">
@@ -141,14 +153,14 @@
   <!-- 右键唤出的菜单 -->
   <div
     class="right_menu"
-    v-show="visible"
+    v-if="visible"
     :style="{ left: left + 'px', top: top + 'px' }"
   >
-    <div class="menu_item">
+    <div class="menu_item" @click="reName">
       <img src="@/assets/images/textbox.png" alt="" />
       <span>重命名</span>
     </div>
-    <div class="menu_item">
+    <div class="menu_item" @click="delTabs">
       <img src="@/assets/images/trash.png" alt="" />
       <span>删除</span>
     </div>
@@ -157,12 +169,14 @@
 
 <script setup>
 import { onMounted, ref, watch } from "vue";
-import { listLabel, addLabel, delLabel } from "@/api/biz/label.js";
+import { toRaw } from "@vue/reactivity";
+import { listLabel, addLabel, delLabel, updateLabel } from "@/api/biz/label.js";
 import { listFavorite } from "@/api/biz/favorite.js";
 const activeNames = ref(["folder", "file"]);
 const clickCollect = ref("first"); //当前标签
 const isAddCollect = ref(false); //是否在添加标签
 const tabName = ref(""); //新增的标签名
+const changeTabName = ref(""); //修改的标签名
 const tabList = ref([]);
 const tableData = [
   {
@@ -225,32 +239,34 @@ const tableData = [
 const visible = ref(false); //显示右键菜单
 const top = ref(0);
 const left = ref(0);
+const thisTab = ref({}); //当前右键的标签
+const isChangeTabName = ref(0); //存放修改状标签的id
 onMounted(async () => {
   await getList();
   await getCollectList();
+  // 添加监听，点击其他地方关闭菜单
+  window.addEventListener("click", closeMenu, true);
 });
 // tab右键事件
-const checkRight = (e, item) => {
-  console.log('11');
-  // TODO 唤出右键菜单，思路：获取鼠标位置来定位菜单
-  this.visible = true;
+const tabClick = (e, item) => {
+  e.preventDefault();
+  e.stopPropagation();
+  // console.log("e", e);
+  // console.log("item", toRaw(item));
+  thisTab.value = item;
+  //  唤出右键菜单，思路：获取鼠标位置来定位菜单
+  visible.value = true;
   top.value = e.pageY;
   left.value = e.pageX;
 };
 // 关闭右键菜单
 const closeMenu = () => {
+  // console.log("close");
   visible.value = false;
 };
 //添加标签
 const toAddCollectFn = async () => {
   isAddCollect.value = true;
-  // const res = await addLabel({
-  //   labelName: "tab1",
-  //   params: {},
-  // });
-  // if (res.code == 200) {
-  //   getList();
-  // }
 };
 const addCollectFn = async () => {
   if (!tabName.value) {
@@ -271,13 +287,17 @@ const getList = async () => {
   const res = await listLabel();
   console.log("tabList =", res);
   if (res.rows.length > 0) {
-    tabList.value = res.rows;
+    let dates = JSON.parse(JSON.stringify(res.rows));
+    tabList.value = [...dates];
+    console.log("tabList", tabList.value);
+    // console.log("dates", dates);
   }
 };
 // 删除标签
 const delTabs = async () => {
-  const res = await delLabel("7"); //直接传id
-  console.log("delres = ", res);
+  let tabDetail = toRaw(thisTab.value);
+  const res = await delLabel(tabDetail.labelId); //直接传id
+  // console.log("delres = ", res);
   getList();
 };
 //获取收藏数据
@@ -288,18 +308,23 @@ const getCollectList = async () => {
     tableData.value = res.rows;
   }
 };
-
-watch(
-  () => visible.value,
-  (nv, ov) => {
-    if (nv) {
-      console.log('r',nv);
-      document.body.addEventListener("click", closeMenu());
-    } else {
-      document.body.removeEventListener("click",closeMenu());
-    }
-  }
-);
+// 修改便签名
+const reName = async () => {
+  console.log("thisTab", toRaw(thisTab.value));
+  let tabDetail = toRaw(thisTab.value);
+  changeTabName.value = tabDetail.labelName;
+  isChangeTabName.value = tabDetail.labelId;
+};
+const reTabName = async () => {
+  let tabDetail = toRaw(thisTab.value);
+  const res = await updateLabel({
+    labelId: tabDetail.labelId,
+    labelName: changeTabName.value,
+  });
+  await getList()
+  isChangeTabName.value = 0
+  console.log("rename", res);
+};
 </script>
 
 <style lang="scss" scoped>
@@ -329,10 +354,13 @@ watch(
 }
 .right_menu {
   width: 100px;
+  position: absolute;
   padding: 8px;
-  box-shadow: 0px 2px 10px 1px rgba(199, 203, 216, 0.4);
+  box-shadow: 0px 2px 10px 1px rgba(199, 203, 216);
   border-radius: 4px 4px 4px 4px;
   border: 1px solid #c1cce3;
+  background-color: #fff;
+  z-index: 10000;
   .menu_item {
     width: 100%;
     height: 40px;