feat(modal): add tooltip for action buttons

为最大化、全屏、还原等操作按钮添加工具提示
vbenjs · Jul 3, 2021 · c3b9076 · c3b9076
1 parent b96ea07
commit c3b9076
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 4 deletions.
diff --git 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
@@ -1,27 +1,36 @@
 <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 },
     },
     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
@@ -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
@@ -50,6 +50,9 @@ export default {
   modal: {
     cancelText: '关闭',
     okText: '确认',
+    close: '关闭',
+    maximize: '最大化',
+    restore: '还原',
   },
   table: {
     settingDens: '密度',