feat(table-action): support `tooltip` option

为tableAction组件中的操作按钮增加tooltip配置 close: #848

feat(table-action): support `tooltip` option
为tableAction组件中的操作按钮增加tooltip配置 close: #848
无木
1 parent 5637588f
Showing 4 changed files with 31 additions and 11 deletions
CHANGELOG.zh_CN.md
src/components/Table/src/components/TableAction.vue
src/components/Table/src/types/tableAction.ts
src/views/demo/system/account/index.vue
@@ -3,6 +3,10 @@
 - **Axios** 新增`withToken`配置，用于控制请求是否携带 token
 - **BasicUpload** 新增在预览 `Modal` 中删除文件时触发`preview-delete` 事件
 - **BasicUpload** `value` 支持 `v-model` 用法
+- **Route 配置**
+  - 增加`ignoreRoute`用于在`ROUTE_MAPPING`或`BACK`权限模式下仅生成菜单
+  - 增加`hidePathForChildren`配置，标识为子项目生成菜单时忽略本级`path`
+- **TableAction** 新增`tooltip`配置，可以为按钮增加 tooltip 提示
  
 ### 🐛 Bug Fixes
  
 <template>
   <div :class="[prefixCls, getAlign]" @click="onCellClick">
     <template v-for="(action, index) in getActions" :key="`${index}-${action.label}`">
-      <PopConfirmButton v-bind="action">
-        <Icon :icon="action.icon" class="mr-1" v-if="action.icon" />
-        {{ action.label }}
-      </PopConfirmButton>
+      <Tooltip v-bind="getTooltip(action.tooltip)">
+        <PopConfirmButton v-bind="action">
+          <Tooltip v-bind="getTooltip(action.tooltip)">
+            <Icon :icon="action.icon" class="mr-1" v-if="action.icon" />
+            {{ action.label }}
+          </Tooltip>
+        </PopConfirmButton>
+      </Tooltip>
       <Divider
         type="vertical"
         class="action-divider"
@@ -31,7 +35,7 @@
 <script lang="ts">
   import { defineComponent, PropType, computed, toRaw } from 'vue';
   import { MoreOutlined } from '@ant-design/icons-vue';
-  import { Divider } from 'ant-design-vue';
+  import { Divider, Tooltip } from 'ant-design-vue';
   import Icon from '/@/components/Icon/index';
   import { ActionItem, TableActionType } from '/@/components/Table';
   import { PopConfirmButton } from '/@/components/Button';
@@ -39,13 +43,13 @@
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useTableContext } from '../hooks/useTableContext';
   import { usePermission } from '/@/hooks/web/usePermission';
-  import { isBoolean, isFunction } from '/@/utils/is';
+  import { isBoolean, isFunction, isString } from '/@/utils/is';
   import { propTypes } from '/@/utils/propTypes';
   import { ACTION_COLUMN_FLAG } from '../const';
  
   export default defineComponent({
     name: 'TableAction',
-    components: { Icon, PopConfirmButton, Divider, Dropdown, MoreOutlined },
+    components: { Icon, PopConfirmButton, Divider, Dropdown, MoreOutlined, Tooltip },
     props: {
       actions: {
         type: Array as PropType<ActionItem[]>,
@@ -124,6 +128,16 @@
         return actionColumn?.align ?? 'left';
       });
  
+      const getTooltip = computed(() => {
+        return (data) => {
+          if (isString(data)) {
+            return { title: data };
+          } else {
+            return data;
+          }
+        };
+      });
+
       function onCellClick(e: MouseEvent) {
         if (!props.stopButtonPropagation) return;
         const target = e.target as HTMLElement;
@@ -132,7 +146,7 @@
         }
       }
  
-      return { prefixCls, getActions, getDropdownList, getAlign, onCellClick };
+      return { prefixCls, getActions, getDropdownList, getAlign, onCellClick, getTooltip };
     },
   });
 </script>
 import { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
+import { TooltipProps } from 'ant-design-vue/es/tooltip/Tooltip';
 import { RoleEnum } from '/@/enums/roleEnum';
 export interface ActionItem extends ButtonProps {
   onClick?: Fn;
@@ -12,6 +13,7 @@ export interface ActionItem extends ButtonProps {
   auth?: RoleEnum | RoleEnum[] | string | string[];
   // 业务控制是否显示
   ifShow?: boolean | ((action: ActionItem) => boolean);
+  tooltip?: string | TooltipProps;
 }
  
 export interface PopConfirm {
@@ -10,18 +10,18 @@
           :actions="[
             {
               icon: 'clarity:info-standard-line',
-              title: '查看用户详情',
+              tooltip: '查看用户详情',
               onClick: handleView.bind(null, record),
             },
             {
               icon: 'clarity:note-edit-line',
-              title: '编辑用户资料',
+              tooltip: '编辑用户资料',
               onClick: handleEdit.bind(null, record),
             },
             {
               icon: 'ant-design:delete-outlined',
               color: 'error',
-              title: '删除此账号',
+              tooltip: '删除此账号',
               popConfirm: {
                 title: '是否确认删除',
                 confirm: handleDelete.bind(null, record),