| | |
| | | <template #title> |
| | | <span>{{ t('component.table.settingFullScreen') }}</span> |
| | | </template> |
| | | <FullscreenOutlined @click="toggleFullscreen" v-if="!isFullscreenRef" /> |
| | | <FullscreenExitOutlined @click="toggleFullscreen" v-else /> |
| | | <FullscreenOutlined @click="toggle" v-if="!isFullscreen" /> |
| | | <FullscreenExitOutlined @click="toggle" v-else /> |
| | | </Tooltip> |
| | | </template> |
| | | <script lang="ts"> |
| | |
| | | import { Tooltip } from 'ant-design-vue'; |
| | | import { FullscreenOutlined, FullscreenExitOutlined } from '@ant-design/icons-vue'; |
| | | |
| | | import { useFullscreen } from '/@/hooks/web/useFullScreen'; |
| | | import { useFullscreen } from '@vueuse/core'; |
| | | |
| | | import { useI18n } from '/@/hooks/web/useI18n'; |
| | | import { useTableContext } from '../../hooks/useTableContext'; |
| | | |
| | |
| | | setup() { |
| | | const table = useTableContext(); |
| | | const { t } = useI18n(); |
| | | const { toggleFullscreen, isFullscreenRef } = useFullscreen(table.wrapRef); |
| | | const { toggle, isFullscreen } = useFullscreen(table.wrapRef); |
| | | |
| | | return { |
| | | toggleFullscreen, |
| | | isFullscreenRef, |
| | | toggle, |
| | | isFullscreen, |
| | | t, |
| | | }; |
| | | }, |