123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248 |
- import { nextTick, defineAsyncComponent } from 'vue';
- import type { App } from 'vue';
- import * as svg from '@element-plus/icons-vue';
- import router from '/@/router/index';
- import pinia from '/@/stores/index';
- import { storeToRefs } from 'pinia';
- import { useThemeConfig } from '/@/stores/themeConfig';
- import { i18n } from '/@/i18n/index';
- import { Local } from '/@/utils/storage';
- import { verifyUrl } from '/@/utils/toolsValidate';
- import {SystemConfigStore} from "/@/stores/systemConfig";
- // 引入组件
- const SvgIcon = defineAsyncComponent(() => import('/@/components/svgIcon/index.vue'));
- /**
- * 导出全局注册 element plus svg 图标
- * @param app vue 实例
- * @description 使用:https://element-plus.gitee.io/zh-CN/component/icon.html
- */
- export function elSvg(app: App) {
- const icons = svg as any;
- for (const i in icons) {
- app.component(`ele-${icons[i].name}`, icons[i]);
- }
- app.component('SvgIcon', SvgIcon);
- }
- /**
- * 设置浏览器标题国际化
- * @method const title = useTitle(); ==> title()
- */
- export function useTitle() {
- const stores = SystemConfigStore(pinia);
- const { systemConfig }: { systemConfig: any} = storeToRefs(stores);
- nextTick(() => {
- let webTitle = '';
- let globalTitle: string = systemConfig['base.web_title'];
- const { path, meta } = router.currentRoute.value;
- if (path === '/login') {
- webTitle = <string>meta.title;
- } else {
- webTitle = setTagsViewNameI18n(router.currentRoute.value);
- }
- // document.title = `${webTitle} - ${globalTitle}` || "DVAdmin";
- document.title = `${webTitle}`;
- });
- }
- /***
- * 设置网站favicon图标
- */
- export function useFavicon() {
- const stores = SystemConfigStore(pinia);
- const { systemConfig } = storeToRefs(stores);
- nextTick(() => {
- const iconUrl = systemConfig.value['base.web_favicon']
- if(iconUrl){
- // 动态设置 favicon,这里假设 favicon 的 URL 是动态获取的或从变量中来
- const faviconUrl = `${iconUrl}?t=${new Date().getTime()}`;
- const link = document.querySelector("link[rel~='icon']") as HTMLLinkElement;
- if (!link) {
- const newLink = document.createElement('link') as HTMLLinkElement;
- newLink.rel = 'shortcut icon';
- newLink.href = faviconUrl;
- document.head.appendChild(newLink);
- } else {
- link.href = faviconUrl;
- }
- }
- });
- }
- /**
- * 设置 自定义 tagsView 名称、 自定义 tagsView 名称国际化
- * @param params 路由 query、params 中的 tagsViewName
- * @returns 返回当前 tagsViewName 名称
- */
- export function setTagsViewNameI18n(item: any) {
- let tagsViewName: string = '';
- const { query, params, meta } = item;
- if (query?.tagsViewName || params?.tagsViewName) {
- if (/\/zh-cn|en|zh-tw\//.test(query?.tagsViewName) || /\/zh-cn|en|zh-tw\//.test(params?.tagsViewName)) {
- // 国际化
- const urlTagsParams = (query?.tagsViewName && JSON.parse(query?.tagsViewName)) || (params?.tagsViewName && JSON.parse(params?.tagsViewName));
- tagsViewName = urlTagsParams[i18n.global.locale.value];
- } else {
- // 非国际化
- tagsViewName = query?.tagsViewName || params?.tagsViewName;
- }
- } else {
- // 非自定义 tagsView 名称
- tagsViewName = i18n.global.t(meta.title);
- }
- return tagsViewName;
- }
- /**
- * 图片懒加载
- * @param el dom 目标元素
- * @param arr 列表数据
- * @description data-xxx 属性用于存储页面或应用程序的私有自定义数据
- */
- export const lazyImg = (el: string, arr: EmptyArrayType) => {
- const io = new IntersectionObserver((res) => {
- res.forEach((v: any) => {
- if (v.isIntersecting) {
- const { img, key } = v.target.dataset;
- v.target.src = img;
- v.target.onload = () => {
- io.unobserve(v.target);
- arr[key]['loading'] = false;
- };
- }
- });
- });
- nextTick(() => {
- document.querySelectorAll(el).forEach((img) => io.observe(img));
- });
- };
- /**
- * 全局组件大小
- * @returns 返回 `window.localStorage` 中读取的缓存值 `globalComponentSize`
- */
- export const globalComponentSize = (): string => {
- const stores = useThemeConfig(pinia);
- const { themeConfig } = storeToRefs(stores);
- return Local.get('themeConfig')?.globalComponentSize || themeConfig.value?.globalComponentSize;
- };
- /**
- * 对象深克隆
- * @param obj 源对象
- * @returns 克隆后的对象
- */
- export function deepClone(obj: EmptyObjectType) {
- let newObj: EmptyObjectType;
- try {
- newObj = obj.push ? [] : {};
- } catch (error) {
- newObj = {};
- }
- for (let attr in obj) {
- if (obj[attr] && typeof obj[attr] === 'object') {
- newObj[attr] = deepClone(obj[attr]);
- } else {
- newObj[attr] = obj[attr];
- }
- }
- return newObj;
- }
- /**
- * 判断是否是移动端
- */
- export function isMobile() {
- if (
- navigator.userAgent.match(
- /('phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone')/i
- )
- ) {
- return true;
- } else {
- return false;
- }
- }
- /**
- * 判断数组对象中所有属性是否为空,为空则删除当前行对象
- * @description @感谢大黄
- * @param list 数组对象
- * @returns 删除空值后的数组对象
- */
- export function handleEmpty(list: EmptyArrayType) {
- const arr = [];
- for (const i in list) {
- const d = [];
- for (const j in list[i]) {
- d.push(list[i][j]);
- }
- const leng = d.filter((item) => item === '').length;
- if (leng !== d.length) {
- arr.push(list[i]);
- }
- }
- return arr;
- }
- /**
- * 打开外部链接
- * @param val 当前点击项菜单
- */
- export function handleOpenLink(val: RouteItem) {
- const { origin, pathname } = window.location;
- router.push(val.path);
- if (verifyUrl(<string>val.meta?.isLink)) window.open(val.meta?.isLink);
- else window.open(`${origin}${pathname}#${val.meta?.isLink}`);
- }
- /**
- * 统一批量导出
- * @method elSvg 导出全局注册 element plus svg 图标
- * @method useTitle 设置浏览器标题国际化
- * @method setTagsViewNameI18n 设置 自定义 tagsView 名称、 自定义 tagsView 名称国际化
- * @method lazyImg 图片懒加载
- * @method globalComponentSize() element plus 全局组件大小
- * @method deepClone 对象深克隆
- * @method isMobile 判断是否是移动端
- * @method handleEmpty 判断数组对象中所有属性是否为空,为空则删除当前行对象
- * @method handleOpenLink 打开外部链接
- */
- const other = {
- elSvg: (app: App) => {
- elSvg(app);
- },
- useTitle: () => {
- useTitle();
- },
- useFavicon:()=>{
- useFavicon()
- },
- setTagsViewNameI18n(route: RouteToFrom) {
- return setTagsViewNameI18n(route);
- },
- lazyImg: (el: string, arr: EmptyArrayType) => {
- lazyImg(el, arr);
- },
- globalComponentSize: () => {
- return globalComponentSize();
- },
- deepClone: (obj: EmptyObjectType) => {
- return deepClone(obj);
- },
- isMobile: () => {
- return isMobile();
- },
- handleEmpty: (list: EmptyArrayType) => {
- return handleEmpty(list);
- },
- handleOpenLink: (val: RouteItem) => {
- handleOpenLink(val);
- },
- };
- // 统一批量导出
- export default other;
|