120 lines
2.9 KiB
TypeScript
120 lines
2.9 KiB
TypeScript
import { nextTick } from 'vue';
|
||
import type { App } from 'vue';
|
||
import * as svg from '@element-plus/icons-vue';
|
||
import router from '/@/router/index';
|
||
import { store } from '/@/store/index';
|
||
import { i18n } from '/@/i18n/index';
|
||
import { Local } from '/@/utils/storage';
|
||
import SvgIcon from '/@/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(`element${icons[i].name}`, icons[i]);
|
||
}
|
||
app.component('SvgIcon', SvgIcon);
|
||
}
|
||
|
||
/**
|
||
* 设置浏览器标题国际化
|
||
* @method const title = useTitle(); ==> title()
|
||
*/
|
||
export function useTitle() {
|
||
nextTick(() => {
|
||
let webTitle = '';
|
||
let globalTitle: string = store.state.themeConfig.themeConfig.globalTitle;
|
||
router.currentRoute.value.path === '/login'
|
||
? (webTitle = router.currentRoute.value.meta.title as any)
|
||
: (webTitle = i18n.global.t(router.currentRoute.value.meta.title as any));
|
||
document.title = `${webTitle} - ${globalTitle}` || globalTitle;
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 图片懒加载
|
||
* @param el dom 目标元素
|
||
* @param arr 列表数据
|
||
* @description data-xxx 属性用于存储页面或应用程序的私有自定义数据
|
||
*/
|
||
export const lazyImg = (el: any, arr: any) => {
|
||
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 function globalComponentSize() {
|
||
return Local.get('themeConfig')?.globalComponentSize;
|
||
}
|
||
|
||
/**
|
||
* 对象深克隆
|
||
* @param obj 源对象
|
||
* @returns 克隆后的对象
|
||
*/
|
||
export function deepClone(obj: any) {
|
||
let newObj: any;
|
||
try {
|
||
newObj = obj.push ? [] : {};
|
||
} catch (error) {
|
||
newObj = {};
|
||
}
|
||
for (let attr in obj) {
|
||
if (typeof obj[attr] === 'object') {
|
||
newObj[attr] = deepClone(obj[attr]);
|
||
} else {
|
||
newObj[attr] = obj[attr];
|
||
}
|
||
}
|
||
return newObj;
|
||
}
|
||
|
||
/**
|
||
* 统一批量导出
|
||
* @method elSvg 导出全局注册 element plus svg 图标
|
||
* @method useTitle 设置浏览器标题国际化
|
||
* @method lazyImg 图片懒加载
|
||
* @method globalComponentSize element plus 全局组件大小
|
||
* @method deepClone 对象深克隆
|
||
*/
|
||
const other = {
|
||
elSvg: (app: App) => {
|
||
elSvg(app);
|
||
},
|
||
useTitle: () => {
|
||
useTitle();
|
||
},
|
||
lazyImg: (el: any, arr: any) => {
|
||
lazyImg(el, arr);
|
||
},
|
||
globalComponentSize: () => {
|
||
globalComponentSize();
|
||
},
|
||
deepClone: (obj: any) => {
|
||
deepClone(obj);
|
||
},
|
||
};
|
||
|
||
// 统一批量导出
|
||
export default other;
|