From c3b907656a5fad7a9b241562179f7a0f6fe0e6f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=97=A0=E6=9C=A8?= <netfan@foxmail.com>
Date: Sat, 3 Jul 2021 23:25:01 +0800
Subject: [PATCH] feat(modal): add `tooltip` for action buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

为最大化、全屏、还原等操作按钮添加工具提示
---
 CHANGELOG.zh_CN.md                             |  1 +
 .../Modal/src/components/ModalClose.vue        | 18 ++++++++++++++----
 src/locales/lang/en/component.ts               |  3 +++
 src/locales/lang/zh_CN/component.ts            |  3 +++
 4 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.zh_CN.md b/CHANGELOG.zh_CN.md
index 7b53e808..999c8e23 100644
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -12,6 +12,7 @@
   - 新增`onChange`用于接受头像剪裁并上传成功事件
   - 新增`btnText`、`btnProps` 用于自定义上传按钮文案和属性
   - 为剪裁`Modal`内的操作按钮添加工具提示
+- **Modal** 为右上角的操作按钮添加工具提示
 
 ### 🐛 Bug Fixes
 
diff --git a/src/components/Modal/src/components/ModalClose.vue b/src/components/Modal/src/components/ModalClose.vue
index 6f531fcd..ae40a20d 100644
--- a/src/components/Modal/src/components/ModalClose.vue
+++ b/src/components/Modal/src/components/ModalClose.vue
@@ -1,20 +1,28 @@
 <template>
   <div :class="getClass">
     <template v-if="canFullscreen">
-      <FullscreenExitOutlined role="full" @click="handleFullScreen" v-if="fullScreen" />
-      <FullscreenOutlined role="close" @click="handleFullScreen" v-else />
+      <Tooltip :title="t('component.modal.restore')" placement="bottom" v-if="fullScreen">
+        <FullscreenExitOutlined role="full" @click="handleFullScreen" />
+      </Tooltip>
+      <Tooltip :title="t('component.modal.maximize')" placement="bottom" v-else>
+        <FullscreenOutlined role="close" @click="handleFullScreen" />
+      </Tooltip>
     </template>
-    <CloseOutlined @click="handleCancel" />
+    <Tooltip :title="t('component.modal.close')" placement="bottom">
+      <CloseOutlined @click="handleCancel" />
+    </Tooltip>
   </div>
 </template>
 <script lang="ts">
   import { defineComponent, computed } from 'vue';
   import { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined } from '@ant-design/icons-vue';
   import { useDesign } from '/@/hooks/web/useDesign';
+  import { Tooltip } from 'ant-design-vue';
+  import { useI18n } from '/@/hooks/web/useI18n';
 
   export default defineComponent({
     name: 'ModalClose',
-    components: { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined },
+    components: { Tooltip, FullscreenExitOutlined, FullscreenOutlined, CloseOutlined },
     props: {
       canFullscreen: { type: Boolean, default: true },
       fullScreen: { type: Boolean },
@@ -22,6 +30,7 @@
     emits: ['cancel', 'fullscreen'],
     setup(props, { emit }) {
       const { prefixCls } = useDesign('basic-modal-close');
+      const { t } = useI18n();
 
       const getClass = computed(() => {
         return [
@@ -44,6 +53,7 @@
       }
 
       return {
+        t,
         getClass,
         prefixCls,
         handleCancel,
diff --git a/src/locales/lang/en/component.ts b/src/locales/lang/en/component.ts
index 38bb2133..da0052e5 100644
--- a/src/locales/lang/en/component.ts
+++ b/src/locales/lang/en/component.ts
@@ -48,6 +48,9 @@ export default {
   modal: {
     cancelText: 'Close',
     okText: 'Confirm',
+    close: 'Close',
+    maximize: 'Maximize',
+    restore: 'Restore',
   },
   table: {
     settingDens: 'Density',
diff --git a/src/locales/lang/zh_CN/component.ts b/src/locales/lang/zh_CN/component.ts
index 752a46e8..4e616b3e 100644
--- a/src/locales/lang/zh_CN/component.ts
+++ b/src/locales/lang/zh_CN/component.ts
@@ -50,6 +50,9 @@ export default {
   modal: {
     cancelText: '关闭',
     okText: '确认',
+    close: '关闭',
+    maximize: '最大化',
+    restore: '还原',
   },
   table: {
     settingDens: '密度',
-- 
GitLab