| | |
| | | <template> |
| | | <Footer :class="prefixCls" v-if="getShowLayoutFooter" ref="footerRef"> |
| | | <Layout.Footer :class="prefixCls" v-if="getShowLayoutFooter" ref="footerRef"> |
| | | <div :class="`${prefixCls}__links`"> |
| | | <a @click="openWindow(SITE_URL)">{{ t('layout.footer.onlinePreview') }}</a> |
| | | |
| | |
| | | <a @click="openWindow(DOC_URL)">{{ t('layout.footer.onlineDocument') }}</a> |
| | | </div> |
| | | <div>Copyright ©2020 Vben Admin</div> |
| | | </Footer> |
| | | </Layout.Footer> |
| | | </template> |
| | | |
| | | <script lang="ts"> |
| | | import { computed, defineComponent, unref, ref } from 'vue'; |
| | | <script lang="ts" setup> |
| | | import { computed, unref, ref } from 'vue'; |
| | | import { Layout } from 'ant-design-vue'; |
| | | |
| | | import { GithubFilled } from '@ant-design/icons-vue'; |
| | | |
| | | import { DOC_URL, GITHUB_URL, SITE_URL } from '/@/settings/siteSetting'; |
| | | import { openWindow } from '/@/utils'; |
| | | import { DOC_URL, GITHUB_URL, SITE_URL } from '@/settings/siteSetting'; |
| | | import { openWindow } from '@/utils'; |
| | | |
| | | import { useI18n } from '/@/hooks/web/useI18n'; |
| | | import { useRootSetting } from '/@/hooks/setting/useRootSetting'; |
| | | import { useI18n } from '@/hooks/web/useI18n'; |
| | | import { useRootSetting } from '@/hooks/setting/useRootSetting'; |
| | | import { useRouter } from 'vue-router'; |
| | | import { useDesign } from '/@/hooks/web/useDesign'; |
| | | import { useDesign } from '@/hooks/web/useDesign'; |
| | | import { useLayoutHeight } from '../content/useContentViewHeight'; |
| | | |
| | | export default defineComponent({ |
| | | name: 'LayoutFooter', |
| | | components: { Footer: Layout.Footer, GithubFilled }, |
| | | setup() { |
| | | const { t } = useI18n(); |
| | | const { getShowFooter } = useRootSetting(); |
| | | const { currentRoute } = useRouter(); |
| | | const { prefixCls } = useDesign('layout-footer'); |
| | | defineOptions({ name: 'LayoutFooter' }); |
| | | |
| | | const footerRef = ref<ComponentRef>(null); |
| | | const { setFooterHeight } = useLayoutHeight(); |
| | | const { t } = useI18n(); |
| | | const { getShowFooter } = useRootSetting(); |
| | | const { currentRoute } = useRouter(); |
| | | const { prefixCls } = useDesign('layout-footer'); |
| | | |
| | | const getShowLayoutFooter = computed(() => { |
| | | if (unref(getShowFooter)) { |
| | | const footerEl = unref(footerRef)?.$el; |
| | | setFooterHeight(footerEl?.offsetHeight || 0); |
| | | } else { |
| | | setFooterHeight(0); |
| | | } |
| | | return unref(getShowFooter) && !unref(currentRoute).meta?.hiddenFooter; |
| | | }); |
| | | const footerRef = ref<ComponentRef>(null); |
| | | const { setFooterHeight } = useLayoutHeight(); |
| | | |
| | | return { |
| | | getShowLayoutFooter, |
| | | prefixCls, |
| | | t, |
| | | DOC_URL, |
| | | GITHUB_URL, |
| | | SITE_URL, |
| | | openWindow, |
| | | footerRef, |
| | | }; |
| | | }, |
| | | const getShowLayoutFooter = computed(() => { |
| | | if (unref(getShowFooter)) { |
| | | const footerEl = unref(footerRef)?.$el; |
| | | setFooterHeight(footerEl?.offsetHeight || 0); |
| | | } else { |
| | | setFooterHeight(0); |
| | | } |
| | | return unref(getShowFooter) && !unref(currentRoute).meta?.hiddenFooter; |
| | | }); |
| | | </script> |
| | | <style lang="less" scoped> |
| | |
| | | @hover-color: rgba(0, 0, 0, 0.85); |
| | | |
| | | .@{prefix-cls} { |
| | | // 页脚固定高度 |
| | | height: 75px; |
| | | color: @normal-color; |
| | | text-align: center; |
| | | |