🔱: [client] sync upgrade with 21 commits [trident-sync]
'admin-22.12.12:发布v2.4.21版本，具体更新内容查看CHANGELOG.md' !42 修复 工作流无法添加新节点问题 Merge pull request !42 from beta/bugfix_workflow 修复 工作流无法添加新节点问题 1. 修复 工作流无法添加新节点问题 2. 修复 左侧导航无法隐藏问题 'admin-22.12.09:发布v2.4.2版本，具体更新内容查看CHANGELOG.md' !41 修复get请求传递嵌套对象或数组时无法正常编码问题 Merge pull request !41 from 随心/master !40 开启TagsView缓存后，刷新后所有的路由都变成组件缓存了 Merge pull request !40 from mrjimin/master 修复get请求传递嵌套对象或数组时无法正常编码问题 update src/layout/routerView/parent.vue. Signed-off-by: mrjimin <z8888788@163.com> update src/layout/routerView/parent.vue. 这里应该拿到的是已经设置开启组件缓存的路由，而不是全部，需要先判断item.meta.isKeepAlive Signed-off-by: mrjimin <z8888788@163.com> 'admin-22.11.30:发布v2.4.1版本，具体更新内容查看CHANGELOG.md' Merge branch 'master' of https://gitee.com/lyt-top/vue-next-admin 'admin-22.11.30:删除v2.4.0版本不需要的依赖' update src/views/error/404.vue. Signed-off-by: lyt-Top <1105290566@qq.com> update src/components/table/index.vue. Signed-off-by: lyt-Top <1105290566@qq.com> 'admin-22.11.30:修改v2.4.0文字说明' 'admin-22.11.30:修改v2.4.0文字说明' 'admin-22.11.29:发布v2.4.0版本，具体更新内容查看CHANGELOG.md' 'admin-22.11.19:修复v2.3.0版本动态路由事件调用关闭当前tagsview、普通路由刷新界面参数丢失问题' 'admin-22.11.18:优化v2.3.0版本tagsview风格5兼容火狐' 'admin-22.11.17:优化v2.3.0版本iframe右键菜单刷新问题' ...
This commit is contained in:
H0nGzA1
218
web/src/utils/other.ts
Normal file
218
web/src/utils/other.ts
Normal file
@@ -0,0 +1,218 @@
|
||||
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';
|
||||
|
||||
// 引入组件
|
||||
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 = useThemeConfig(pinia);
|
||||
const { themeConfig } = storeToRefs(stores);
|
||||
nextTick(() => {
|
||||
let webTitle = '';
|
||||
let globalTitle: string = themeConfig.value.globalTitle;
|
||||
const { path, meta } = router.currentRoute.value;
|
||||
if (path === '/login') {
|
||||
webTitle = <string>meta.title;
|
||||
} else {
|
||||
webTitle = setTagsViewNameI18n(router.currentRoute.value);
|
||||
}
|
||||
document.title = `${webTitle} - ${globalTitle}` || globalTitle;
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置 自定义 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();
|
||||
},
|
||||
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;
|
||||
Reference in New Issue
Block a user