[feat](公共table): table按钮组件修改

.prettierrc.js

@@ -12,7 +12,7 @@ module.exports = {
   htmlWhitespaceSensitivity: "css",
   insertPragma: false,
   jsxSingleQuote: false,
-  printWidth: 100, // 如果属性过多需要换行，减少该值
+  printWidth: 80, // 如果属性过多需要换行，减少该值
   proseWrap: "preserve",
   quoteProps: "as-needed",
   requirePragma: false,

src/bg-ui/bg-table-btns2.vue

 <template>
-  <div class="bg-table-btns" ref="bgTableBtnsRef">
+  <div ref="bgTableBtnsRef" class="bg-table-btns">
     <slot></slot>
-    <span
-      class="bg-table-btn more"
-      id="more_btn"
-      v-if="state.children.length > limit"
-      ref="lastEl"
-      @mouseenter="showMoreBtns"
-      @mouseleave="hideMoreBtns">
-      <bg-icon style="font-size: 12px; color: #2b4695" icon="#bg-ic-s-more" />
-      <teleport to="body">
-        <div
-          class="more-box"
-          :style="state.style"
-          v-if="state.showMore"
-          @mouseenter="showMoreBtns"
-          @mouseleave="hideMoreBtns">
-          <span
-            v-for="(item, index) in state.lastChildren"
-            :key="'as' + index"
-            @click="action(item.onClick, item.disabled)"
-            :class="item.disabled ? 'disabled' : ''"
-            >{{ item.name }}</span
-          >
-        </div>
-      </teleport>
-    </span>
+    <el-popover :popper-style="bgTablePopover" trigger="hover" :hide-after="50">
+      <div class="more-box" :style="state.style">
+        <span
+          v-for="(item, index) in state.lastChildren"
+          :key="'as' + index"
+          :class="item.disabled ? 'disabled' : ''"
+          @click="action(item.onClick, item.disabled)"
+          >{{ item.name }}</span
+        >
+      </div>
+      <template #reference>
+        <span v-if="state.children.length - 1 > limit" id="more_btn" ref="lastEl" class="bg-table-btn more">
+          <bg-icon style="font-size: 12px; color: #2b4695" icon="#bg-ic-s-more" />
+        </span>
+        <!-- 解决不需显示时警告问题 -->
+        <span v-else></span>
+      </template>
+    </el-popover>
   </div>
 </template>
 
 <script setup>
-import { reactive, ref, onBeforeMount, onMounted, toRefs, provide, useSlots, h, render, nextTick } from "vue";
+import { reactive, ref, onBeforeMount, onMounted, toRefs, provide, useSlots, watch, nextTick } from "vue";
 const slots = useSlots();
 
 const props = defineProps({
@@ -38,6 +31,10 @@ const props = defineProps({
     type: Number,
     default: 3,
   },
+  tableData: {
+    type: Array,
+    default: () => [],
+  },
 });
 
 const bgTableBtnsRef = ref(null);
@@ -51,60 +48,72 @@ const state = reactive({
   showMore: false,
 });
 
+watch(
+  () => props.tableData,
+  () => {
+    nextTick(() => {
+      calcTabs();
+      dealData();
+    });
+  },
+  {
+    deep: true,
+  }
+);
 const action = (event, disable) => {
   if (disable) {
     return;
   }
   event();
-  state.showMore = false
+  state.showMore = false;
 };
 
 const calcTabs = () => {
   let tabSlots = slots.default() || [];
+  let tempSlots = [];
   state.lastChildren = [];
-  if (tabSlots) {
-    tabSlots.forEach((e, idx) => {
-      if (idx + 2 > props.limit && tabSlots.length > props.limit && e.props) {
+  tabSlots.forEach((e) => {
+    //注释和v-if忽略
+    if (Object.prototype.toString.call(e.children) == "[object String]") {
+      //v-for 再次遍历
+    } else if (Object.prototype.toString.call(e.children) == "[object Array]") {
+      let children = e.children || [];
+      children.forEach((el) => {
+        //注释和v-if忽略
+        if (Object.prototype.toString.call(e.children) == "[object String]") {
+          console.log(el.type);
+        } else {
+          tempSlots.push(el);
+        }
+      });
+      //普通节点
+    } else {
+      tempSlots.push(e);
+    }
+  });
+  //   debugger;
+  if (tempSlots) {
+    tempSlots.forEach((e, idx) => {
+      if (idx + 2 > props.limit && tempSlots.length > props.limit && e.props) {
+        // console.log(e);
+        // console.log(e.props);
+
         state.lastChildren.push(e.props);
       }
     });
   }
 };
 
-const showMoreBtns = () => {
-  calcTabs();
-  dealData();
-  nextTick(() => {
-    updateSytle();
-    if (state.timer) clearTimeout(state.timer);
-    state.showMore = true;
-  });
-};
-const hideMoreBtns = () => {
-  if (state.timer) clearTimeout(state.timer);
-  state.timer = setTimeout(() => {
-    state.showMore = false;
-  }, 50);
-};
-const updateSytle = () => {
-  let { top, right } = lastEl.value.getBoundingClientRect();
-  let { width } = window.document.body.getBoundingClientRect();
-  state.style = {
-    top: `${top + 16}px`,
-    right: `${width - right - 16}px`,
-  };
-};
-
 const dealData = () => {
   let children = bgTableBtnsRef.value.children || [];
   state.children = children;
-  if (children.length > props.limit) {
+  if (children.length - 1 > props.limit) {
     children[props.limit - 1].style.display = "none";
     children[props.limit - 1].style.width = "0px";
     state.index = props.limit - 2;
     state.lastChildren[0].name = children[props.limit - 1].innerText;
   }
-  for (let index = 0; index < children.length; index++) {
+  for (let index = 0; index < children.length - 1; index++) {
     const e = children[index];
     if (index + 1 > props.limit && e.tagName == "A" && e.className.indexOf("bg-table-btn") !== -1) {
       e.style.display = "none";
@@ -114,6 +123,14 @@ const dealData = () => {
   }
 };
 
+const bgTablePopover = {
+  width: "auto",
+  maxWidth: "96px",
+  padding: "4px 0",
+  minWidth: "60px",
+  marginTop: "-5px",
+};
+
 onMounted(() => {
   calcTabs();
   dealData();
@@ -126,35 +143,20 @@ onMounted(() => {
   z-index: 200;
 }
 
-.more-box {
-  position: fixed;
-  padding: 4px 0;
-  background-color: #ffffff;
-  box-shadow: 0px 4px 12px 0px rgba(18, 30, 63, 0.1);
-  border-radius: 4px;
-  border: solid 1px #e6e9ef;
-  width: 88px;
-  z-index: 300;
-}
-
 .more-box span {
   display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   word-break: break-all;
   white-space: nowrap;
-  display: block;
-  padding: 0 16px;
-  margin: 0;
-  color: #202531;
-  line-height: 34px;
-  padding-left: 16px;
-  font-size: 16px;
+  padding: 10px 16px;
+  color: #404a62;
+  line-height: 1;
+  font-size: 14px;
   cursor: pointer;
 }
 .more-box span:hover {
   background-color: #f2f3f7;
-  color: #202531;
 }
 .more-box .disabled {
   color: #a9b1c7;