xiaoxian521
3 years ago
55 changed files with 454 additions and 853 deletions
-
2LICENSE
-
9README.en-US.md
-
8README.md
-
102build/plugins.ts
-
1index.html
-
5mock/asyncRoutes.ts
-
21package.json
-
242pnpm-lock.yaml
-
18public/iconfont.css
-
BINsrc/assets/car.png
-
0src/assets/login/illustration.svg
-
1src/assets/login/illustration0.svg
-
1src/assets/login/illustration1.svg
-
1src/assets/login/illustration3.svg
-
1src/assets/login/illustration4.svg
-
1src/assets/login/illustration5.svg
-
1src/assets/login/illustration6.svg
-
149src/components/ReIcon/index.ts
-
97src/components/ReIcon/src/Icon.vue
-
39src/components/ReIcon/src/hooks.ts
-
48src/components/ReIcon/src/iconfont.ts
-
25src/components/ReIcon/src/iconifyIconOffline.ts
-
8src/components/ReIcon/src/iconifyIconOnline.ts
-
6src/layout/components/navbar.vue
-
6src/layout/components/notice/data.ts
-
10src/layout/components/screenfull/index.vue
-
10src/layout/components/setting/index.vue
-
17src/layout/components/sidebar/horizontal.vue
-
13src/layout/components/sidebar/logo.vue
-
19src/layout/components/sidebar/sidebarItem.vue
-
3src/layout/components/sidebar/vertical.vue
-
28src/layout/components/tag/index.scss
-
27src/layout/components/tag/index.vue
-
4src/layout/theme/element-plus.ts
-
3src/layout/types.ts
-
15src/main.ts
-
26src/plugins/element-plus/index.ts
-
21src/plugins/fontawesome/index.ts
-
17src/plugins/i18n/en/menus.ts
-
17src/plugins/i18n/zh-CN/menus.ts
-
7src/router/modules/error.ts
-
2src/router/modules/externalLink.ts
-
4src/router/modules/home.ts
-
2src/router/utils.ts
-
3src/store/modules/multiTags.ts
-
3src/store/modules/user.ts
-
4src/style/login.css
-
21src/utils/algorithm/index.ts
-
54src/utils/loaders/index.ts
-
35src/utils/resize/index.ts
-
3src/utils/storage/responsive.ts
-
38src/views/login.vue
-
1types/global.d.ts
-
106vite.config.ts
@ -0,0 +1,102 @@ |
|||||
|
import vue from "@vitejs/plugin-vue"; |
||||
|
import svgLoader from "vite-svg-loader"; |
||||
|
import legacy from "@vitejs/plugin-legacy"; |
||||
|
import vueJsx from "@vitejs/plugin-vue-jsx"; |
||||
|
import WindiCSS from "vite-plugin-windicss"; |
||||
|
import { viteMockServe } from "vite-plugin-mock"; |
||||
|
import liveReload from "vite-plugin-live-reload"; |
||||
|
import ElementPlus from "unplugin-element-plus/vite"; |
||||
|
import removeConsole from "vite-plugin-remove-console"; |
||||
|
import themePreprocessorPlugin from "@zougt/vite-plugin-theme-preprocessor"; |
||||
|
|
||||
|
export function getPluginsList(command, VITE_LEGACY) { |
||||
|
const prodMock = true; |
||||
|
return [ |
||||
|
vue(), |
||||
|
// jsx、tsx语法支持
|
||||
|
vueJsx(), |
||||
|
WindiCSS(), |
||||
|
// 线上环境删除console
|
||||
|
removeConsole(), |
||||
|
// 修改layout文件夹下的文件时自动重载浏览器 解决 https://github.com/xiaoxian521/vue-pure-admin/issues/170
|
||||
|
liveReload(["src/layout/**/*", "src/router/**/*"]), |
||||
|
// 自定义主题
|
||||
|
themePreprocessorPlugin({ |
||||
|
scss: { |
||||
|
multipleScopeVars: [ |
||||
|
{ |
||||
|
scopeName: "layout-theme-default", |
||||
|
path: "src/layout/theme/default-vars.scss" |
||||
|
}, |
||||
|
{ |
||||
|
scopeName: "layout-theme-light", |
||||
|
path: "src/layout/theme/light-vars.scss" |
||||
|
}, |
||||
|
{ |
||||
|
scopeName: "layout-theme-dusk", |
||||
|
path: "src/layout/theme/dusk-vars.scss" |
||||
|
}, |
||||
|
{ |
||||
|
scopeName: "layout-theme-volcano", |
||||
|
path: "src/layout/theme/volcano-vars.scss" |
||||
|
}, |
||||
|
{ |
||||
|
scopeName: "layout-theme-yellow", |
||||
|
path: "src/layout/theme/yellow-vars.scss" |
||||
|
}, |
||||
|
{ |
||||
|
scopeName: "layout-theme-mingQing", |
||||
|
path: "src/layout/theme/mingQing-vars.scss" |
||||
|
}, |
||||
|
{ |
||||
|
scopeName: "layout-theme-auroraGreen", |
||||
|
path: "src/layout/theme/auroraGreen-vars.scss" |
||||
|
}, |
||||
|
{ |
||||
|
scopeName: "layout-theme-pink", |
||||
|
path: "src/layout/theme/pink-vars.scss" |
||||
|
}, |
||||
|
{ |
||||
|
scopeName: "layout-theme-saucePurple", |
||||
|
path: "src/layout/theme/saucePurple-vars.scss" |
||||
|
} |
||||
|
], |
||||
|
// 默认取 multipleScopeVars[0].scopeName
|
||||
|
defaultScopeName: "", |
||||
|
// 在生产模式是否抽取独立的主题css文件，extract为true以下属性有效
|
||||
|
extract: true, |
||||
|
// 独立主题css文件的输出路径，默认取 viteConfig.build.assetsDir 相对于 (viteConfig.build.outDir)
|
||||
|
outputDir: "", |
||||
|
// 会选取defaultScopeName对应的主题css文件在html添加link
|
||||
|
themeLinkTagId: "head", |
||||
|
// "head"||"head-prepend" || "body" ||"body-prepend"
|
||||
|
themeLinkTagInjectTo: "head", |
||||
|
// 是否对抽取的css文件内对应scopeName的权重类名移除
|
||||
|
removeCssScopeName: false, |
||||
|
// 可以自定义css文件名称的函数
|
||||
|
customThemeCssFileName: scopeName => scopeName |
||||
|
} |
||||
|
}), |
||||
|
// svg组件化支持
|
||||
|
svgLoader(), |
||||
|
ElementPlus({}), |
||||
|
// mock支持
|
||||
|
viteMockServe({ |
||||
|
mockPath: "mock", |
||||
|
localEnabled: command === "serve", |
||||
|
prodEnabled: command !== "serve" && prodMock, |
||||
|
injectCode: `
|
||||
|
import { setupProdMockServer } from './mockProdServer'; |
||||
|
setupProdMockServer(); |
||||
|
`,
|
||||
|
logger: true |
||||
|
}), |
||||
|
// 是否为打包后的文件提供传统浏览器兼容性支持
|
||||
|
VITE_LEGACY |
||||
|
? legacy({ |
||||
|
targets: ["ie >= 11"], |
||||
|
additionalLegacyPolyfills: ["regenerator-runtime/runtime"] |
||||
|
}) |
||||
|
: null |
||||
|
]; |
||||
|
} |
||||
@ -1,18 +0,0 @@ |
|||||
@font-face { |
|
||||
font-family: "iconfont"; /* project id 1098500 */ |
|
||||
src: url("//at.alicdn.com/t/font_1098500_3d6un9zwltz.eot"); |
|
||||
src: url("//at.alicdn.com/t/font_1098500_3d6un9zwltz.eot?#iefix") |
|
||||
format("embedded-opentype"), |
|
||||
url("//at.alicdn.com/t/font_1098500_3d6un9zwltz.woff2") format("woff2"), |
|
||||
url("//at.alicdn.com/t/font_1098500_3d6un9zwltz.woff") format("woff"), |
|
||||
url("//at.alicdn.com/t/font_1098500_3d6un9zwltz.ttf") format("truetype"), |
|
||||
url("//at.alicdn.com/t/font_1098500_3d6un9zwltz.svg#iconfont") format("svg"); |
|
||||
} |
|
||||
|
|
||||
.iconfont { |
|
||||
font-family: "iconfont" !important; |
|
||||
font-size: 16px; |
|
||||
font-style: normal; |
|
||||
-webkit-font-smoothing: antialiased; |
|
||||
-moz-osx-font-smoothing: grayscale; |
|
||||
} |
|
||||
|
Before Width: 36 | Height: 20 | Size: 1.4 KiB |
1
src/assets/login/illustration0.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1
src/assets/login/illustration1.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1
src/assets/login/illustration3.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1
src/assets/login/illustration4.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1
src/assets/login/illustration5.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
1
src/assets/login/illustration6.svg
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
@ -1,154 +1,13 @@ |
|||||
import { h, App, defineComponent } from "vue"; |
|
||||
import icon from "./src/Icon.vue"; |
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; |
|
||||
import iconifyIconOffline from "./src/iconifyIconOffline"; |
import iconifyIconOffline from "./src/iconifyIconOffline"; |
||||
import iconifyIconOnline from "./src/iconifyIconOnline"; |
import iconifyIconOnline from "./src/iconifyIconOnline"; |
||||
|
|
||||
/** |
|
||||
* find icon component |
|
||||
* @param icon icon图标 |
|
||||
* @returns component |
|
||||
*/ |
|
||||
export function findIconReg(icon: string) { |
|
||||
// fontawesome4
|
|
||||
const fa4Reg = /^fa-/; |
|
||||
// fontawesome5+
|
|
||||
const fa5Reg = /^FA-/; |
|
||||
// iconfont
|
|
||||
const iFReg = /^IF-/; |
|
||||
// remixicon
|
|
||||
const riReg = /^RI-/; |
|
||||
// typeof icon === "function" 属于SVG
|
|
||||
if (fa5Reg.test(icon)) { |
|
||||
const text = icon.split(fa5Reg)[1]; |
|
||||
return findIcon( |
|
||||
text.slice(0, text.indexOf(" ") == -1 ? text.length : text.indexOf(" ")), |
|
||||
"FA", |
|
||||
text.slice(text.indexOf(" ") + 1, text.length) |
|
||||
); |
|
||||
} else if (fa4Reg.test(icon)) { |
|
||||
return findIcon(icon.split(fa4Reg)[1], "fa"); |
|
||||
} else if (iFReg.test(icon)) { |
|
||||
return findIcon(icon.split(iFReg)[1], "IF"); |
|
||||
} else if (typeof icon === "function") { |
|
||||
return findIcon(icon, "SVG"); |
|
||||
} else if (riReg.test(icon)) { |
|
||||
return findIcon(icon.split(riReg)[1], "RI"); |
|
||||
} else { |
|
||||
return findIcon(icon, "EL"); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
// 支持fontawesome、iconfont、remixicon、element-plus/icons、自定义svg
|
|
||||
export function findIcon(icon: String, type = "EL", property?: string) { |
|
||||
if (type === "FA") { |
|
||||
return defineComponent({ |
|
||||
name: "FaIcon", |
|
||||
data() { |
|
||||
return { icon, property }; |
|
||||
}, |
|
||||
components: { FontAwesomeIcon }, |
|
||||
render() { |
|
||||
return h( |
|
||||
FontAwesomeIcon, |
|
||||
{ |
|
||||
icon: `${this.icon}`, |
|
||||
[property]: true |
|
||||
}, |
|
||||
{ |
|
||||
default: () => [] |
|
||||
} |
|
||||
); |
|
||||
} |
|
||||
}); |
|
||||
} else if (type === "fa") { |
|
||||
return defineComponent({ |
|
||||
name: "faIcon", |
|
||||
data() { |
|
||||
return { icon: `fa ${icon}` }; |
|
||||
}, |
|
||||
render() { |
|
||||
return h( |
|
||||
"i", |
|
||||
{ |
|
||||
class: `${this.icon}` |
|
||||
}, |
|
||||
{ |
|
||||
default: () => [] |
|
||||
} |
|
||||
); |
|
||||
} |
|
||||
}); |
|
||||
} else if (type === "IF") { |
|
||||
return defineComponent({ |
|
||||
name: "IfIcon", |
|
||||
data() { |
|
||||
return { icon: `iconfont ${icon}` }; |
|
||||
}, |
|
||||
render() { |
|
||||
return h( |
|
||||
"i", |
|
||||
{ |
|
||||
class: `${this.icon}` |
|
||||
}, |
|
||||
{ |
|
||||
default: () => [] |
|
||||
} |
|
||||
); |
|
||||
} |
|
||||
}); |
|
||||
} else if (type === "RI") { |
|
||||
return defineComponent({ |
|
||||
name: "RiIcon", |
|
||||
data() { |
|
||||
return { icon: `ri-${icon}` }; |
|
||||
}, |
|
||||
render() { |
|
||||
return h( |
|
||||
"i", |
|
||||
{ |
|
||||
class: `${this.icon}` |
|
||||
}, |
|
||||
{ |
|
||||
default: () => [] |
|
||||
} |
|
||||
); |
|
||||
} |
|
||||
}); |
|
||||
} else if (type === "EL") { |
|
||||
return defineComponent({ |
|
||||
name: "ElIcon", |
|
||||
data() { |
|
||||
return { icon }; |
|
||||
}, |
|
||||
render() { |
|
||||
return h( |
|
||||
IconifyIconOffline, |
|
||||
{ |
|
||||
icon: `${this.icon}` |
|
||||
}, |
|
||||
{ |
|
||||
default: () => [] |
|
||||
} |
|
||||
); |
|
||||
} |
|
||||
}); |
|
||||
} else if (type === "SVG") { |
|
||||
return icon; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
export const Icon = Object.assign(icon, { |
|
||||
install(app: App) { |
|
||||
app.component(icon.name, icon); |
|
||||
} |
|
||||
}); |
|
||||
|
import fontIcon from "./src/iconfont"; |
||||
|
|
||||
export const IconifyIconOffline = iconifyIconOffline; |
export const IconifyIconOffline = iconifyIconOffline; |
||||
export const IconifyIconOnline = iconifyIconOnline; |
export const IconifyIconOnline = iconifyIconOnline; |
||||
|
export const FontIcon = fontIcon; |
||||
|
|
||||
export default { |
export default { |
||||
Icon, |
|
||||
IconifyIconOffline, |
IconifyIconOffline, |
||||
IconifyIconOnline |
|
||||
|
IconifyIconOnline, |
||||
|
FontIcon |
||||
}; |
}; |
||||
@ -1,97 +0,0 @@ |
|||||
<script lang="ts"> |
|
||||
export default { |
|
||||
name: "Icon" |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<script setup lang="ts"> |
|
||||
import { ref, computed } from "vue"; |
|
||||
|
|
||||
const props = defineProps({ |
|
||||
content: { |
|
||||
type: String, |
|
||||
default: "" |
|
||||
}, |
|
||||
size: { |
|
||||
type: Number, |
|
||||
default: 18 |
|
||||
}, |
|
||||
width: { |
|
||||
type: Number, |
|
||||
default: 20 |
|
||||
}, |
|
||||
height: { |
|
||||
type: Number, |
|
||||
default: 20 |
|
||||
}, |
|
||||
color: { |
|
||||
type: String, |
|
||||
default: "" |
|
||||
}, |
|
||||
svg: { |
|
||||
type: Boolean, |
|
||||
default: false |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
const emit = defineEmits<{ |
|
||||
(e: "click"): void; |
|
||||
}>(); |
|
||||
|
|
||||
let text = ref(""); |
|
||||
|
|
||||
let className = computed(() => { |
|
||||
if (props.content.indexOf("fa-") > -1) { |
|
||||
return props.content.indexOf("fa ") === 0 |
|
||||
? props.content |
|
||||
: ["fa", props.content]; |
|
||||
} else if (props.content.indexOf("el-icon-") > -1) { |
|
||||
return props.content; |
|
||||
} else if (props.content.indexOf("#") > -1) { |
|
||||
// eslint-disable-next-line vue/no-side-effects-in-computed-properties |
|
||||
text.value = props.content; |
|
||||
return "iconfont"; |
|
||||
} else { |
|
||||
// eslint-disable-next-line vue/no-side-effects-in-computed-properties |
|
||||
text.value = props.content; |
|
||||
return ""; |
|
||||
} |
|
||||
}); |
|
||||
|
|
||||
let iconStyle = computed(() => { |
|
||||
return ( |
|
||||
"font-size: " + |
|
||||
props.size + |
|
||||
"px; color: " + |
|
||||
props.color + |
|
||||
"; width: " + |
|
||||
props.width + |
|
||||
"px; height: " + |
|
||||
props.height + |
|
||||
"px; font-style: normal;" |
|
||||
); |
|
||||
}); |
|
||||
|
|
||||
const clickHandle = () => { |
|
||||
emit("click"); |
|
||||
}; |
|
||||
</script> |
|
||||
|
|
||||
<template> |
|
||||
<i |
|
||||
v-if="!props.svg" |
|
||||
:class="className" |
|
||||
:style="iconStyle" |
|
||||
v-html="text" |
|
||||
@click="clickHandle" |
|
||||
></i> |
|
||||
<svg |
|
||||
class="icon-svg" |
|
||||
v-if="props.svg" |
|
||||
aria-hidden="true" |
|
||||
:style="iconStyle" |
|
||||
@click="clickHandle" |
|
||||
> |
|
||||
<use :xlink:href="`#${props.content}`" /> |
|
||||
</svg> |
|
||||
</template> |
|
||||
@ -0,0 +1,39 @@ |
|||||
|
import { h, defineComponent, Component } from "vue"; |
||||
|
import { IconifyIconOffline, FontIcon } from "../index"; |
||||
|
|
||||
|
// 支持fontawesome4、5+、iconfont、remixicon、element-plus的icons、自定义svg
|
||||
|
export function useRenderIcon(icon: string): Component { |
||||
|
// iconfont
|
||||
|
const ifReg = /^IF-/; |
||||
|
// typeof icon === "function" 属于SVG
|
||||
|
if (ifReg.test(icon)) { |
||||
|
// iconfont
|
||||
|
const name = icon.split(ifReg)[1]; |
||||
|
const iconName = name.slice( |
||||
|
0, |
||||
|
name.indexOf(" ") == -1 ? name.length : name.indexOf(" ") |
||||
|
); |
||||
|
const iconType = name.slice(name.indexOf(" ") + 1, name.length); |
||||
|
return defineComponent({ |
||||
|
name: "FontIcon", |
||||
|
render() { |
||||
|
return h(FontIcon, { |
||||
|
icon: iconName, |
||||
|
iconType |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} else if (typeof icon === "function") { |
||||
|
// svg
|
||||
|
return icon; |
||||
|
} else { |
||||
|
return defineComponent({ |
||||
|
name: "Icon", |
||||
|
render() { |
||||
|
return h(IconifyIconOffline, { |
||||
|
icon: icon |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,48 @@ |
|||||
|
import { h, defineComponent } from "vue"; |
||||
|
|
||||
|
// 封装iconfont组件，默认`font-class`引用模式，支持`unicode`引用、`font-class`引用、`symbol`引用 （https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.20&helptype=code）
|
||||
|
export default defineComponent({ |
||||
|
name: "fontIcon", |
||||
|
props: { |
||||
|
icon: { |
||||
|
type: String, |
||||
|
default: "" |
||||
|
} |
||||
|
}, |
||||
|
render() { |
||||
|
const attrs = this.$attrs; |
||||
|
if (Object.keys(attrs).includes("uni") || attrs?.iconType === "uni") { |
||||
|
return h( |
||||
|
"i", |
||||
|
{ |
||||
|
class: "iconfont", |
||||
|
...attrs |
||||
|
}, |
||||
|
this.icon |
||||
|
); |
||||
|
} else if ( |
||||
|
Object.keys(attrs).includes("svg") || |
||||
|
attrs?.iconType === "svg" |
||||
|
) { |
||||
|
return h( |
||||
|
"svg", |
||||
|
{ |
||||
|
class: "icon-svg", |
||||
|
"aria-hidden": true |
||||
|
}, |
||||
|
{ |
||||
|
default: () => [ |
||||
|
h("use", { |
||||
|
"xlink:href": `#${this.icon}` |
||||
|
}) |
||||
|
] |
||||
|
} |
||||
|
); |
||||
|
} else { |
||||
|
return h("i", { |
||||
|
class: `iconfont ${this.icon}`, |
||||
|
...attrs |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
@ -1,21 +0,0 @@ |
|||||
/** 兼容fontawesome4和5版本 |
|
||||
* 4版本: www.fontawesome.com.cn/faicons/ |
|
||||
* 5版本：https://fontawesome.com/v5.15/icons?d=gallery&p=2&m=free
|
|
||||
* https://github.com/FortAwesome/vue-fontawesome
|
|
||||
*/ |
|
||||
import { App } from "vue"; |
|
||||
import "font-awesome/css/font-awesome.css"; |
|
||||
import { library } from "@fortawesome/fontawesome-svg-core"; |
|
||||
import { |
|
||||
faUserSecret, |
|
||||
faCoffee, |
|
||||
faSpinner |
|
||||
} from "@fortawesome/free-solid-svg-icons"; |
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; |
|
||||
// github.com/Remix-Design/RemixIcon/blob/master/README_CN.md#%E5%AE%89%E8%A3%85%E5%BC%95%E5%85%A5
|
|
||||
import "remixicon/fonts/remixicon.css"; |
|
||||
|
|
||||
export function useFontawesome(app: App) { |
|
||||
library.add(faUserSecret, faCoffee, faSpinner); |
|
||||
app.component("font-awesome-icon", FontAwesomeIcon); |
|
||||
} |
|
||||
@ -1,21 +0,0 @@ |
|||||
interface ProxyAlgorithm { |
|
||||
increaseIndexes<T>(val: Array<T>): Array<T>; |
|
||||
} |
|
||||
|
|
||||
class algorithmProxy implements ProxyAlgorithm { |
|
||||
constructor() {} |
|
||||
|
|
||||
// 数组每一项添加索引字段
|
|
||||
public increaseIndexes<T>(val: Array<T>): Array<T> { |
|
||||
return Object.keys(val) |
|
||||
.map(v => { |
|
||||
return { |
|
||||
...val[v], |
|
||||
key: v |
|
||||
}; |
|
||||
}) |
|
||||
.filter(v => v.meta && v.meta.showLink); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
export const algorithm = new algorithmProxy(); |
|
||||
@ -1,54 +0,0 @@ |
|||||
interface ProxyLoader { |
|
||||
loadCss(src: string): any; |
|
||||
loadScript(src: string): Promise<any>; |
|
||||
loadScriptConcurrent(src: Array<string>): Promise<any>; |
|
||||
} |
|
||||
|
|
||||
class loaderProxy implements ProxyLoader { |
|
||||
constructor() {} |
|
||||
|
|
||||
protected scriptLoaderCache: Array<string> = []; |
|
||||
|
|
||||
public loadCss = (src: string): any => { |
|
||||
const element: HTMLLinkElement = document.createElement("link"); |
|
||||
element.rel = "stylesheet"; |
|
||||
element.href = src; |
|
||||
document.body.appendChild(element); |
|
||||
}; |
|
||||
|
|
||||
public loadScript = async (src: string): Promise<any> => { |
|
||||
if (this.scriptLoaderCache.includes(src)) { |
|
||||
return src; |
|
||||
} else { |
|
||||
const element: HTMLScriptElement = document.createElement("script"); |
|
||||
element.src = src; |
|
||||
document.body.appendChild(element); |
|
||||
element.onload = () => { |
|
||||
return this.scriptLoaderCache.push(src); |
|
||||
}; |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
public loadScriptConcurrent = async ( |
|
||||
srcList: Array<string> |
|
||||
): Promise<any> => { |
|
||||
if (Array.isArray(srcList)) { |
|
||||
const len: number = srcList.length; |
|
||||
if (len > 0) { |
|
||||
let count = 0; |
|
||||
srcList.map(src => { |
|
||||
if (src) { |
|
||||
this.loadScript(src).then(() => { |
|
||||
count++; |
|
||||
if (count === len) { |
|
||||
return; |
|
||||
} |
|
||||
}); |
|
||||
} |
|
||||
}); |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
} |
|
||||
|
|
||||
export const loader = new loaderProxy(); |
|
||||
@ -1,35 +0,0 @@ |
|||||
import ResizeObserver from "resize-observer-polyfill"; |
|
||||
|
|
||||
const isServer = typeof window === "undefined"; |
|
||||
|
|
||||
const resizeHandler = (entries: any[]): void => { |
|
||||
for (const entry of entries) { |
|
||||
const listeners = entry.target.__resizeListeners__ || []; |
|
||||
if (listeners.length) { |
|
||||
listeners.forEach((fn: () => any) => { |
|
||||
fn(); |
|
||||
}); |
|
||||
} |
|
||||
} |
|
||||
}; |
|
||||
|
|
||||
export const addResizeListener = (element: any, fn: () => any): any => { |
|
||||
if (isServer) return; |
|
||||
if (!element.__resizeListeners__) { |
|
||||
element.__resizeListeners__ = []; |
|
||||
element.__ro__ = new ResizeObserver(resizeHandler); |
|
||||
element.__ro__.observe(element); |
|
||||
} |
|
||||
element.__resizeListeners__.push(fn); |
|
||||
}; |
|
||||
|
|
||||
export const removeResizeListener = (element: any, fn: () => any): any => { |
|
||||
if (!element || !element.__resizeListeners__) return; |
|
||||
element.__resizeListeners__.splice( |
|
||||
element.__resizeListeners__.indexOf(fn), |
|
||||
1 |
|
||||
); |
|
||||
if (!element.__resizeListeners__.length) { |
|
||||
element.__ro__.disconnect(); |
|
||||
} |
|
||||
}; |
|
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue