ele-admin-plus 1.2.1-beta.1 → 1.2.1-beta.3

package/es/ele-tabs/index.js

@@ -1,7 +1,8 @@
-import { defineComponent, inject, ref, computed, onMounted, onBeforeUnmount, watch, resolveComponent, openBlock, createBlock, mergeProps, createSlots, withCtx, createElementBlock, Fragment, renderList, createVNode, renderSlot } from "vue";
+import { defineComponent, inject, ref, computed, onMounted, nextTick, onBeforeUnmount, watch, resolveComponent, openBlock, createBlock, mergeProps, createSlots, withCtx, createElementBlock, Fragment, renderList, createVNode, renderSlot, createCommentVNode } from "vue";
 import SortableJs from "sortablejs";
 import { ElTabs, ElTabPane } from "element-plus";
 import { pick, omit } from "../utils/core";
+import { useTimer, useMousewheel, useTouchEvent } from "../utils/hook";
 import TabTitle from "./components/tab-title";
 import { tabsProps, tabsEmits, TAB_WRAP_KEY, tabPropKeys } from "./props";
 const _sfc_main = defineComponent({
@@ -10,8 +11,25 @@ const _sfc_main = defineComponent({
   props: tabsProps,
   emits: tabsEmits,
   setup(props, { emit }) {
+    const [startScrollTimer, _stopScrollTimer, scrollWaiting] = useTimer(320);
+    let sortableIns = null;
     const wrapProps = inject(TAB_WRAP_KEY, null);
-    const current = { sortIns: null, isScroll: false };
+    const { bindMousewheel, unbindMousewheel } = useMousewheel((param) => {
+      const { e, direction } = param;
+      scrollTabs(direction === "up" ? "prev" : "next", () => {
+        e.preventDefault();
+        e.stopPropagation();
+      });
+    });
+    const { bindTouchEvent, unbindTouchEvent } = useTouchEvent({
+      end: (param) => {
+        if (param.distanceX && param.distanceX > 80) {
+          scrollTabs("prev");
+        } else if (param.distanceX && param.distanceX < 80) {
+          scrollTabs("next");
+        }
+      }
+    });
     const tabRef = ref(null);
     const itemRefs = ref([]);
     const isWrap = computed(() => wrapProps == null);
@@ -57,7 +75,7 @@ const _sfc_main = defineComponent({
     const handleItemContextOpen = (ref2) => {
       if (itemRefs.value) {
         itemRefs.value.forEach((r) => {
-          if ((r == null ? void 0 : r.dropdownRef) && r.dropdownRef !== ref2) {
+          if (r && r.dropdownRef && r.dropdownRef !== ref2) {
             r.dropdownRef.handleClose();
           }
         });
@@ -73,7 +91,7 @@ const _sfc_main = defineComponent({
     const hideAllDropdown = () => {
       if (itemRefs.value) {
         itemRefs.value.forEach((r) => {
-          if (r == null ? void 0 : r.dropdownRef) {
+          if (r && r.dropdownRef) {
             r.dropdownRef.handleClose();
           }
         });
@@ -88,15 +106,6 @@ const _sfc_main = defineComponent({
       const headerEl = getHeaderEl();
       return headerEl ? headerEl.querySelector(".el-tabs__nav") : void 0;
     };
-    const getBtnEl = (el, e, firefox) => {
-      const wheelDelta = e.wheelDelta || e.detail;
-      const delta = firefox ? -wheelDelta : wheelDelta;
-      if (delta > 0) {
-        return el.querySelector(".el-tabs__nav-prev");
-      } else if (delta < 0) {
-        return el.querySelector(".el-tabs__nav-next");
-      }
-    };
     const updateActiveBar = () => {
       const el = getNavEl();
       if (el) {
@@ -106,13 +115,35 @@ const _sfc_main = defineComponent({
         }
       }
     };
+    const scrollTabs = (direction, done) => {
+      const tabEl = getHeaderEl();
+      if (tabEl && !scrollWaiting.value) {
+        const el = tabEl.querySelector(`.el-tabs__nav-${direction}`);
+        if (el && !el.classList.contains("is-disabled")) {
+          startScrollTimer();
+          done && done();
+          el.click();
+        }
+      }
+    };
+    const checkScrollActive = () => {
+      const active = props.modelValue;
+      if (props.items && active != null) {
+        const index2 = props.items.findIndex((item) => item.name === active);
+        if (index2 === 0) {
+          scrollTabs("prev");
+        } else if (index2 === props.items.length - 1) {
+          scrollTabs("next");
+        }
+      }
+    };
     const bindDragSort = () => {
       unbindDragSort();
       const el = getNavEl();
       if (!props.sortable || !el) {
         return;
       }
-      current.sortIns = new SortableJs(el, {
+      sortableIns = new SortableJs(el, {
         animation: 300,
         draggable: ".el-tabs__item",
         onUpdate: ({ oldDraggableIndex, newDraggableIndex }) => {
@@ -131,42 +162,40 @@ const _sfc_main = defineComponent({
       });
     };
     const unbindDragSort = () => {
-      current.sortIns && current.sortIns.destroy();
-      current.sortIns = null;
+      sortableIns && sortableIns.destroy();
+      sortableIns = null;
     };
-    const handleMousewheel = (e, isFirefox) => {
-      const tabEl = e.currentTarget;
-      if (tabEl && !current.isScroll) {
-        const el = getBtnEl(tabEl, e, isFirefox);
-        if (el && !el.classList.contains("is-disabled")) {
-          current.isScroll = true;
-          e.preventDefault();
-          e.stopPropagation();
-          el.click();
-          setTimeout(() => {
-            current.isScroll = false;
-          }, 300);
+    const initMousewheelEvent = () => {
+      const el = getHeaderEl();
+      if (el != null) {
+        unbindMousewheel(el);
+        if (props.mousewheel) {
+          bindMousewheel(el);
         }
       }
     };
-    const handleFirefoxMousewheel = (e) => {
-      handleMousewheel(e, true);
+    const initTouchEvent = () => {
+      const el = getHeaderEl();
+      if (el != null) {
+        unbindTouchEvent(el);
+        if (!props.sortable) {
+          bindTouchEvent(el);
+        }
+      }
     };
     onMounted(() => {
+      nextTick(() => {
+        checkScrollActive();
+      });
+      initMousewheelEvent();
+      initTouchEvent();
       bindDragSort();
-      const el = getHeaderEl();
-      if (props.mousewheel && el) {
-        el.addEventListener("mousewheel", handleMousewheel, {
-          passive: false
-        });
-        el.addEventListener("DOMMouseScroll", handleFirefoxMousewheel);
-      }
     });
     onBeforeUnmount(() => {
       const el = getHeaderEl();
-      if (el) {
-        el.removeEventListener("mousewheel", handleMousewheel);
-        el.removeEventListener("DOMMouseScroll", handleFirefoxMousewheel);
+      if (el != null) {
+        unbindMousewheel(el);
+        unbindTouchEvent(el);
       }
       unbindDragSort();
     });
@@ -174,6 +203,21 @@ const _sfc_main = defineComponent({
       () => props.sortable,
       () => {
         bindDragSort();
+        initTouchEvent();
+      }
+    );
+    watch(
+      () => props.mousewheel,
+      () => {
+        initMousewheelEvent();
+      }
+    );
+    watch(
+      () => props.modelValue,
+      () => {
+        nextTick(() => {
+          checkScrollActive();
+        });
       }
     );
     return {
@@ -225,7 +269,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       { "is-indicator": _ctx.tabType === "indicator" },
       { "is-button": _ctx.tabType === "button" },
       { "is-tag": _ctx.tabType === "tag" },
-      { "is-center": _ctx.center }
+      { "is-center": _ctx.center },
+      { "is-flex-table": _ctx.flexTable }
     ],
     "onUpdate:modelValue": _ctx.updateModelValue,
     onTabClick: _ctx.handleTabClick,
@@ -237,52 +282,54 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   }), createSlots({
     default: withCtx(() => [
       (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item, index2) => {
-        return openBlock(), createBlock(_component_ElTabPane, mergeProps({
-          key: index2 + "-" + item.name + "-" + item.label,
-          ref_for: true
-        }, _ctx.omit(item, ["slot", "meta"])), createSlots({
-          label: withCtx(() => [
-            createVNode(_component_TabTitle, {
-              ref_for: true,
-              ref: "itemRefs",
-              item,
-              label: item.label,
-              tabName: item.name,
-              active: _ctx.modelValue,
-              handleClick: _ctx.handleClick,
-              contextMenu: _ctx.contextMenu,
-              contextMenus: _ctx.getContextMenus(item),
-              onContextMenu: _ctx.handleItemContextMenu,
-              onContextOpen: _ctx.handleItemContextOpen,
-              onItemClick: _ctx.handleItemClick
-            }, createSlots({ _: 2 }, [
-              _ctx.$slots.label ? {
-                name: "label",
-                fn: withCtx((slotProps) => [
-                  renderSlot(_ctx.$slots, "label", mergeProps({ ref_for: true }, slotProps || {}))
-                ]),
-                key: "0"
-              } : void 0,
-              _ctx.$slots.contextMenu ? {
-                name: "contextMenu",
-                fn: withCtx((slotProps) => [
-                  renderSlot(_ctx.$slots, "contextMenu", mergeProps({ ref_for: true }, slotProps || {}))
-                ]),
-                key: "1"
-              } : void 0
-            ]), 1032, ["item", "label", "tabName", "active", "handleClick", "contextMenu", "contextMenus", "onContextMenu", "onContextOpen", "onItemClick"])
-          ]),
-          _: 2
-        }, [
-          item.name && _ctx.$slots[item.slot || item.name] ? {
-            name: "default",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, item.slot || item.name, { item })
+        return openBlock(), createElementBlock(Fragment, null, [
+          (item.vIf == null ? true : item.vIf) ? (openBlock(), createBlock(_component_ElTabPane, mergeProps({
+            key: index2 + "-" + item.name + "-" + item.label,
+            ref_for: true
+          }, _ctx.omit(item, ["slot", "meta", "vIf"])), createSlots({
+            label: withCtx(() => [
+              createVNode(_component_TabTitle, {
+                ref_for: true,
+                ref: "itemRefs",
+                item,
+                label: item.label,
+                tabName: item.name,
+                active: _ctx.modelValue,
+                handleClick: _ctx.handleClick,
+                contextMenu: _ctx.contextMenu,
+                contextMenus: _ctx.getContextMenus(item),
+                onContextMenu: _ctx.handleItemContextMenu,
+                onContextOpen: _ctx.handleItemContextOpen,
+                onItemClick: _ctx.handleItemClick
+              }, createSlots({ _: 2 }, [
+                _ctx.$slots.label ? {
+                  name: "label",
+                  fn: withCtx((slotProps) => [
+                    renderSlot(_ctx.$slots, "label", mergeProps({ ref_for: true }, slotProps || {}))
+                  ]),
+                  key: "0"
+                } : void 0,
+                _ctx.$slots.contextMenu ? {
+                  name: "contextMenu",
+                  fn: withCtx((slotProps) => [
+                    renderSlot(_ctx.$slots, "contextMenu", mergeProps({ ref_for: true }, slotProps || {}))
+                  ]),
+                  key: "1"
+                } : void 0
+              ]), 1032, ["item", "label", "tabName", "active", "handleClick", "contextMenu", "contextMenus", "onContextMenu", "onContextOpen", "onItemClick"])
             ]),
-            key: "0"
-          } : void 0
-        ]), 1040);
-      }), 128))
+            _: 2
+          }, [
+            item.name && _ctx.$slots[item.slot || item.name] ? {
+              name: "default",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, item.slot || item.name, { item })
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1040)) : createCommentVNode("", true)
+        ], 64);
+      }), 256))
     ]),
     _: 2
   }, [

package/es/ele-tabs/props.d.ts

@@ -29,22 +29,24 @@ export declare const tabsProps: {
     mousewheel: BooleanConstructor;
     /** 是否自己处理页签点击事件 */
     handleClick: BooleanConstructor;
+    /** 内部表格是否弹性布局 */
+    flexTable: BooleanConstructor;
     closable: BooleanConstructor;
     addable: BooleanConstructor;
     modelValue: {
-        readonly type: PropType<import('element-plus/es/utils/index').EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
         readonly required: false;
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
     editable: BooleanConstructor;
-    tabPosition: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, "top" | "bottom" | "right" | "left", unknown, "top", boolean>;
-    beforeLeave: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => (newName: import('element-plus').TabPaneName, oldName: import('element-plus').TabPaneName) => import('element-plus/es/utils/typescript').Awaitable<boolean | void>) | (() => (newName: import('element-plus').TabPaneName, oldName: import('element-plus').TabPaneName) => import('element-plus/es/utils/typescript').Awaitable<boolean | void>) | {
-        (): (newName: import('element-plus').TabPaneName, oldName: import('element-plus').TabPaneName) => import('element-plus/es/utils/typescript').Awaitable<boolean | void>;
+    tabPosition: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, "top" | "bottom" | "left" | "right", unknown, "top", boolean>;
+    beforeLeave: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => (newName: import('element-plus').TabPaneName, oldName: import('element-plus').TabPaneName) => import('element-plus/es/utils/typescript').Awaitable<void | boolean>) | (() => (newName: import('element-plus').TabPaneName, oldName: import('element-plus').TabPaneName) => import('element-plus/es/utils/typescript').Awaitable<void | boolean>) | {
+        (): (newName: import('element-plus').TabPaneName, oldName: import('element-plus').TabPaneName) => import('element-plus/es/utils/typescript').Awaitable<void | boolean>;
         new (): any;
         readonly prototype: any;
-    } | ((new (...args: any[]) => (newName: import('element-plus').TabPaneName, oldName: import('element-plus').TabPaneName) => import('element-plus/es/utils/typescript').Awaitable<boolean | void>) | (() => (newName: import('element-plus').TabPaneName, oldName: import('element-plus').TabPaneName) => import('element-plus/es/utils/typescript').Awaitable<boolean | void>) | {
-        (): (newName: import('element-plus').TabPaneName, oldName: import('element-plus').TabPaneName) => import('element-plus/es/utils/typescript').Awaitable<boolean | void>;
+    } | ((new (...args: any[]) => (newName: import('element-plus').TabPaneName, oldName: import('element-plus').TabPaneName) => import('element-plus/es/utils/typescript').Awaitable<void | boolean>) | (() => (newName: import('element-plus').TabPaneName, oldName: import('element-plus').TabPaneName) => import('element-plus/es/utils/typescript').Awaitable<void | boolean>) | {
+        (): (newName: import('element-plus').TabPaneName, oldName: import('element-plus').TabPaneName) => import('element-plus/es/utils/typescript').Awaitable<void | boolean>;
         new (): any;
         readonly prototype: any;
     })[], unknown, unknown, () => true, boolean>;
@@ -64,25 +66,9 @@ export declare const tabsEmits: {
     /** 拖动排序改变事件 */
     tabSortChange: (_data: TabPaneItem[]) => boolean;
     "update:modelValue": (name: import('element-plus').TabPaneName) => boolean;
-    tabClick: (pane: {
-        uid: number;
-        slots: Readonly<{
-            [name: string]: import('vue').Slot<any> | undefined;
-        }>;
-        props: {
-            readonly closable: boolean;
-            readonly disabled: boolean;
-            readonly label: string;
-            readonly lazy: boolean;
-            readonly name?: import('element-plus/es/utils/index').EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown> | undefined;
-        };
-        paneName: string | number | undefined;
-        active: boolean;
-        index: string | undefined;
-        isClosable: boolean;
-    }, ev: Event) => boolean;
+    tabClick: (pane: import('element-plus').TabsPaneContext, ev: Event) => boolean;
     tabChange: (name: import('element-plus').TabPaneName) => boolean;
-    edit: (paneName: import('element-plus').TabPaneName | undefined, action: "add" | "remove") => boolean;
+    edit: (paneName: import('element-plus').TabPaneName | undefined, action: "remove" | "add") => boolean;
     tabRemove: (name: import('element-plus').TabPaneName) => boolean;
     tabAdd: () => boolean;
 };

package/es/ele-tabs/props.js

@@ -21,7 +21,9 @@ const tabsProps = {
   /** 是否支持鼠标滚轮滑动 */
   mousewheel: Boolean,
   /** 是否自己处理页签点击事件 */
-  handleClick: Boolean
+  handleClick: Boolean,
+  /** 内部表格是否弹性布局 */
+  flexTable: Boolean
 };
 const tabsEmits = {
   ...tabsEmits$1,

package/es/ele-tabs/style/index.scss

@@ -6,6 +6,7 @@
 
 /* 标签页 */
 .ele-tabs.el-tabs > .el-tabs__header {
+  flex-shrink: 0;
   margin: 0;
 
   .el-tabs__nav-wrap {
@@ -122,8 +123,14 @@
   }
 
   /* 拖动 */
-  .el-tabs__item.sortable-ghost {
-    opacity: 0;
+  .el-tabs__item {
+    &.sortable-chosen {
+      user-select: none;
+    }
+
+    &.sortable-ghost {
+      opacity: 0;
+    }
   }
 
   /* 左右箭头 */
@@ -1056,3 +1063,36 @@
     }
   }
 }
+
+/* 内部表格高度铺满 */
+.ele-tabs.is-flex-table {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+  & > .el-tabs__content {
+    flex: 1;
+    overflow: auto;
+
+    & > .el-tab-pane {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      box-sizing: border-box;
+
+      & > .ele-pro-table {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        overflow: auto;
+
+        & > .ele-pro-table-view {
+          flex: 1;
+          height: 100%;
+          overflow: hidden;
+        }
+      }
+    }
+  }
+}

package/es/ele-tabs/types.d.ts

@@ -1,4 +1,3 @@
-import type SortableJs from 'sortablejs';
 import type { ElTabPaneProps } from '../ele-app/el';
 import type { DropdownItem } from '../ele-dropdown/types';
 
@@ -10,6 +9,8 @@ export interface TabPaneItem extends ElTabPaneProps {
   slot?: string;
   /** 元数据 */
   meta?: any;
+  /** 显示条件 */
+  vIf?: any;
 }
 
 /**
@@ -54,16 +55,6 @@ export type ContextMenusFunc = (item?: TabPaneItem) => DropdownItem[];
  */
 export type ContextMenus = DropdownItem[] | ContextMenusFunc;
 
-/**
- * 页签实例数据
- */
-export interface TabCurrent {
-  /** 拖拽排序实例 */
-  sortIns?: SortableJs | null;
-  /** 鼠标滚轮事件节流 */
-  isScroll?: boolean;
-}
-
 /**
  * 标签页容器属性
  */

package/es/ele-text/index.d.ts

@@ -11,7 +11,7 @@ declare const _default: import('vue').DefineComponent<{
     italic: BooleanConstructor;
     icon: import('vue').PropType<import('./types').TextIcon>;
     iconProps: import('vue').PropType<import('../ele-app/el').ElIconProps>;
-    iconStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    iconStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
 }, unknown, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     tag: {
         type: StringConstructor;
@@ -25,7 +25,7 @@ declare const _default: import('vue').DefineComponent<{
     italic: BooleanConstructor;
     icon: import('vue').PropType<import('./types').TextIcon>;
     iconProps: import('vue').PropType<import('../ele-app/el').ElIconProps>;
-    iconStyle: import('vue').PropType<Partial<import('vue').CSSProperties>>;
+    iconStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
 }>>, {
     tag: string;
     underline: boolean;

package/es/ele-text/props.d.ts

@@ -1,4 +1,5 @@
 import { PropType, ExtractPropTypes } from 'vue';
+import { StyleValue } from '../ele-app/types';
 import { ElIconProps } from '../ele-app/el';
 import { TextType, TextSize, TextIcon } from './types';
 
@@ -28,7 +29,7 @@ export declare const textProps: {
     /** 图标属性 */
     iconProps: PropType<ElIconProps>;
     /** 图标样式 */
-    iconStyle: PropType<Partial<import('vue').CSSProperties>>;
+    iconStyle: PropType<StyleValue>;
 };
 export type TextProps = ExtractPropTypes<typeof textProps>;
 export type TextPropKeys = Array<keyof typeof textProps>;

package/es/ele-tool/index.d.ts

@@ -1,27 +1,33 @@
+import { EleTooltipProps } from '../ele-app/plus';
+
 declare const _default: import('vue').DefineComponent<{
     title: StringConstructor;
     placement: {
-        type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, import('element-plus').Placement, unknown> | undefined>;
+        type: import('vue').PropType<EleTooltipProps["placement"]>;
         default: string;
     };
     disabled: BooleanConstructor;
+    clickHideTooltip: BooleanConstructor;
 }, {
-    visible: import('vue').Ref<boolean>;
-    updateVisible: (value: boolean) => void;
-    onClick: (e: MouseEvent) => void;
+    handleClick: (e: MouseEvent) => void;
+    handleMouseover: (e: MouseEvent) => void;
+    showTooltip: (text?: string, el?: HTMLElement, options?: EleTooltipProps) => void;
+    hideTooltip: () => void;
 }, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     click: (_e: MouseEvent) => boolean;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     title: StringConstructor;
     placement: {
-        type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, import('element-plus').Placement, unknown> | undefined>;
+        type: import('vue').PropType<EleTooltipProps["placement"]>;
         default: string;
     };
     disabled: BooleanConstructor;
+    clickHideTooltip: BooleanConstructor;
 }>> & {
     onClick?: ((_e: MouseEvent) => any) | undefined;
 }, {
     placement: import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, import('element-plus').Placement, unknown> | undefined;
     disabled: boolean;
+    clickHideTooltip: boolean;
 }, {}>;
 export default _default;

package/es/ele-tool/index.js

@@ -1,33 +1,44 @@
-import { defineComponent, ref, watch, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, renderSlot } from "vue";
-import EleTooltip from "../ele-tooltip/index";
+import { defineComponent, inject, watch, openBlock, createElementBlock, createElementVNode, renderSlot } from "vue";
+import { TOOLBAR_KEY } from "../ele-toolbar/props";
 import { toolProps, toolEmits } from "./props";
 const _sfc_main = defineComponent({
   name: "EleTool",
-  components: { EleTooltip },
   props: toolProps,
   emits: toolEmits,
   setup(props, { emit }) {
-    const visible = ref(false);
-    const updateVisible = (value) => {
-      if (value && (!props.title || props.disabled)) {
-        visible.value = false;
-        return;
+    const toolbarProvide = inject(TOOLBAR_KEY, {});
+    const showTooltip = (text, el, options) => {
+      if (toolbarProvide.showTooltip) {
+        toolbarProvide.showTooltip(text, el, options);
       }
-      visible.value = value;
     };
-    const onClick = (e) => {
-      visible.value = false;
+    const hideTooltip = () => {
+      toolbarProvide.hideTooltip && toolbarProvide.hideTooltip();
+    };
+    const handleClick = (e) => {
+      if (props.clickHideTooltip) {
+        hideTooltip();
+      }
       emit("click", e);
     };
+    const handleMouseover = (e) => {
+      if (props.title && !props.disabled) {
+        showTooltip(props.title, e.currentTarget, {
+          placement: props.placement,
+          offset: 10
+        });
+      }
+    };
     watch([() => props.disabled, () => props.title], () => {
       if (!props.title || props.disabled) {
-        visible.value = false;
+        hideTooltip();
       }
     });
     return {
-      visible,
-      updateVisible,
-      onClick
+      handleClick,
+      handleMouseover,
+      showTooltip,
+      hideTooltip
     };
   }
 });
@@ -40,26 +51,15 @@ const _export_sfc = (sfc, props) => {
 };
 const _hoisted_1 = { class: "ele-tool-body" };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_EleTooltip = resolveComponent("EleTooltip");
   return openBlock(), createElementBlock("div", {
     class: "ele-tool",
-    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args))
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
+    onMouseover: _cache[1] || (_cache[1] = (...args) => _ctx.handleMouseover && _ctx.handleMouseover(...args))
   }, [
-    createVNode(_component_EleTooltip, {
-      content: _ctx.title,
-      visible: _ctx.visible,
-      placement: _ctx.placement,
-      offset: 10,
-      "onUpdate:visible": _ctx.updateVisible
-    }, {
-      default: withCtx(() => [
-        createElementVNode("div", _hoisted_1, [
-          renderSlot(_ctx.$slots, "default")
-        ])
-      ]),
-      _: 3
-    }, 8, ["content", "visible", "placement", "onUpdate:visible"])
-  ]);
+    createElementVNode("div", _hoisted_1, [
+      renderSlot(_ctx.$slots, "default")
+    ])
+  ], 32);
 }
 const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/es/ele-tool/props.d.ts

@@ -1,4 +1,5 @@
 import { PropType, ExtractPropTypes } from 'vue';
+import { EleTooltipProps } from '../ele-app/plus';
 
 /**
  * 属性
@@ -8,11 +9,13 @@ export declare const toolProps: {
     title: StringConstructor;
     /** 提示方向 */
     placement: {
-        type: PropType<import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, import('element-plus').Placement, unknown> | undefined>;
+        type: PropType<EleTooltipProps["placement"]>;
         default: string;
     };
     /** 是否禁用提示 */
     disabled: BooleanConstructor;
+    /** 是否点击时关闭提示 */
+    clickHideTooltip: BooleanConstructor;
 };
 export type ToolProps = ExtractPropTypes<typeof toolProps>;
 /**