Commit c3b907656a5fad7a9b241562179f7a0f6fe0e6f0
1 parent
b96ea075
feat(modal): add `tooltip` for action buttons
为最大化、全屏、还原等操作按钮添加工具提示
Showing
4 changed files
with
21 additions
and
4 deletions
CHANGELOG.zh_CN.md
src/components/Modal/src/components/ModalClose.vue
| 1 | 1 | <template> |
| 2 | 2 | <div :class="getClass"> |
| 3 | 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 | 10 | </template> |
| 7 | - <CloseOutlined @click="handleCancel" /> | |
| 11 | + <Tooltip :title="t('component.modal.close')" placement="bottom"> | |
| 12 | + <CloseOutlined @click="handleCancel" /> | |
| 13 | + </Tooltip> | |
| 8 | 14 | </div> |
| 9 | 15 | </template> |
| 10 | 16 | <script lang="ts"> |
| 11 | 17 | import { defineComponent, computed } from 'vue'; |
| 12 | 18 | import { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined } from '@ant-design/icons-vue'; |
| 13 | 19 | import { useDesign } from '/@/hooks/web/useDesign'; |
| 20 | + import { Tooltip } from 'ant-design-vue'; | |
| 21 | + import { useI18n } from '/@/hooks/web/useI18n'; | |
| 14 | 22 | |
| 15 | 23 | export default defineComponent({ |
| 16 | 24 | name: 'ModalClose', |
| 17 | - components: { FullscreenExitOutlined, FullscreenOutlined, CloseOutlined }, | |
| 25 | + components: { Tooltip, FullscreenExitOutlined, FullscreenOutlined, CloseOutlined }, | |
| 18 | 26 | props: { |
| 19 | 27 | canFullscreen: { type: Boolean, default: true }, |
| 20 | 28 | fullScreen: { type: Boolean }, |
| ... | ... | @@ -22,6 +30,7 @@ |
| 22 | 30 | emits: ['cancel', 'fullscreen'], |
| 23 | 31 | setup(props, { emit }) { |
| 24 | 32 | const { prefixCls } = useDesign('basic-modal-close'); |
| 33 | + const { t } = useI18n(); | |
| 25 | 34 | |
| 26 | 35 | const getClass = computed(() => { |
| 27 | 36 | return [ |
| ... | ... | @@ -44,6 +53,7 @@ |
| 44 | 53 | } |
| 45 | 54 | |
| 46 | 55 | return { |
| 56 | + t, | |
| 47 | 57 | getClass, |
| 48 | 58 | prefixCls, |
| 49 | 59 | handleCancel, | ... | ... |
src/locales/lang/en/component.ts