canrd-outside / order-erp-front · Commits

Commit c3b907656a5fad7a9b241562179f7a0f6fe0e6f0

Authored by 无木
1 parent b96ea075

feat(modal): add `tooltip` for action buttons 

为最大化、全屏、还原等操作按钮添加工具提示
Inline Side-by-side
Showing 4 changed files with 21 additions and 4 deletions
CHANGELOG.zh_CN.md
  View file @c3b9076
@@ -12,6 +12,7 @@ @@ -12,6 +12,7 @@
12 - 新增`onChange`用于接受头像剪裁并上传成功事件 12 - 新增`onChange`用于接受头像剪裁并上传成功事件
13 - 新增`btnText`、`btnProps` 用于自定义上传按钮文案和属性 13 - 新增`btnText`、`btnProps` 用于自定义上传按钮文案和属性
14 - 为剪裁`Modal`内的操作按钮添加工具提示 14 - 为剪裁`Modal`内的操作按钮添加工具提示
  15 +- **Modal** 为右上角的操作按钮添加工具提示
15 16
16 ### 🐛 Bug Fixes 17 ### 🐛 Bug Fixes
17 18
src/components/Modal/src/components/ModalClose.vue
  View file @c3b9076
1 <template> 1 <template>
2 <div :class="getClass"> 2 <div :class="getClass">
3 <template v-if="canFullscreen"> 3 <template v-if="canFullscreen">
4 - <FullscreenExitOutlined role="full" @click="handleFullScreen" v-if="fullScreen" />  
5 - <FullscreenOutlined role="close" @click="handleFullScreen" v-else /> 4 + <Tooltip :title="t('component.modal.restore')" placement="bottom" v-if="fullScreen">
  5 + <FullscreenExitOutlined role="full" @click="handleFullScreen" />
  6 + </Tooltip>
  7 + <Tooltip :title="t('component.modal.maximize')" placement="bottom" v-else>
  8 + <FullscreenOutlined role="close" @click="handleFullScreen" />
  9 + </Tooltip>
6 </template> 10 </template>
7 - <CloseOutlined @click="handleCancel" /> 11 + <Tooltip :title="t('component.modal.close')" placement="bottom">
  12 + <CloseOutlined @click="handleCancel" />
  13 + </Tooltip>
8 </div> 14 </div>
9 </template> 15 </template>
10 <script lang="ts"> 16 <script lang="ts">
11 import { defineComponent, computed } from 'vue'; 17 import { defineComponent, computed } from 'vue';
12 import { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined } from '@ant-design/icons-vue'; 18 import { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined } from '@ant-design/icons-vue';
13 import { useDesign } from '/@/hooks/web/useDesign'; 19 import { useDesign } from '/@/hooks/web/useDesign';
  20 + import { Tooltip } from 'ant-design-vue';
  21 + import { useI18n } from '/@/hooks/web/useI18n';
14 22
15 export default defineComponent({ 23 export default defineComponent({
16 name: 'ModalClose', 24 name: 'ModalClose',
17 - components: { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined }, 25 + components: { Tooltip, FullscreenExitOutlined, FullscreenOutlined, CloseOutlined },
18 props: { 26 props: {
19 canFullscreen: { type: Boolean, default: true }, 27 canFullscreen: { type: Boolean, default: true },
20 fullScreen: { type: Boolean }, 28 fullScreen: { type: Boolean },
@@ -22,6 +30,7 @@ @@ -22,6 +30,7 @@
22 emits: ['cancel', 'fullscreen'], 30 emits: ['cancel', 'fullscreen'],
23 setup(props, { emit }) { 31 setup(props, { emit }) {
24 const { prefixCls } = useDesign('basic-modal-close'); 32 const { prefixCls } = useDesign('basic-modal-close');
  33 + const { t } = useI18n();
25 34
26 const getClass = computed(() => { 35 const getClass = computed(() => {
27 return [ 36 return [
@@ -44,6 +53,7 @@ @@ -44,6 +53,7 @@
44 } 53 }
45 54
46 return { 55 return {
  56 + t,
47 getClass, 57 getClass,
48 prefixCls, 58 prefixCls,
49 handleCancel, 59 handleCancel,
src/locales/lang/en/component.ts
  View file @c3b9076
@@ -48,6 +48,9 @@ export default { @@ -48,6 +48,9 @@ export default {
48 modal: { 48 modal: {
49 cancelText: 'Close', 49 cancelText: 'Close',
50 okText: 'Confirm', 50 okText: 'Confirm',
  51 + close: 'Close',
  52 + maximize: 'Maximize',
  53 + restore: 'Restore',
51 }, 54 },
52 table: { 55 table: {
53 settingDens: 'Density', 56 settingDens: 'Density',
src/locales/lang/zh_CN/component.ts
  View file @c3b9076
@@ -50,6 +50,9 @@ export default { @@ -50,6 +50,9 @@ export default {
50 modal: { 50 modal: {
51 cancelText: '关闭', 51 cancelText: '关闭',
52 okText: '确认', 52 okText: '确认',
  53 + close: '关闭',
  54 + maximize: '最大化',
  55 + restore: '还原',
53 }, 56 },
54 table: { 57 table: {
55 settingDens: '密度', 58 settingDens: '密度',