perf: 同步完整版分支代码
This commit is contained in:
parent
e161102495
commit
885cbf2d9f
@ -36,6 +36,7 @@
|
||||
"animate.css": "^4.1.1",
|
||||
"axios": "^0.25.0",
|
||||
"css-color-function": "^1.3.3",
|
||||
"dayjs": "^1.10.7",
|
||||
"element-plus": "^2.0.2",
|
||||
"element-resize-detector": "^1.2.3",
|
||||
"js-cookie": "^3.0.1",
|
||||
|
2
pnpm-lock.yaml
generated
2
pnpm-lock.yaml
generated
@ -31,6 +31,7 @@ specifiers:
|
||||
axios: ^0.25.0
|
||||
cross-env: 7.0.3
|
||||
css-color-function: ^1.3.3
|
||||
dayjs: ^1.10.7
|
||||
element-plus: ^2.0.2
|
||||
element-resize-detector: ^1.2.3
|
||||
eslint: ^8.8.0
|
||||
@ -89,6 +90,7 @@ dependencies:
|
||||
animate.css: 4.1.1
|
||||
axios: 0.25.0
|
||||
css-color-function: 1.3.3
|
||||
dayjs: 1.10.7
|
||||
element-plus: 2.0.2_vue@3.2.31
|
||||
element-resize-detector: 1.2.4
|
||||
js-cookie: 3.0.1
|
||||
|
@ -1,8 +1,14 @@
|
||||
import { iconType } from "./types";
|
||||
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 {
|
||||
/**
|
||||
* 支持fontawesome4、5+、iconfont、remixicon、element-plus的icons、自定义svg
|
||||
* @param icon 必传 string 图标
|
||||
* @param attrs 可选 iconType 属性
|
||||
* @returns Component
|
||||
*/
|
||||
export function useRenderIcon(icon: string, attrs?: iconType): Component {
|
||||
// iconfont
|
||||
const ifReg = /^IF-/;
|
||||
// typeof icon === "function" 属于SVG
|
||||
@ -19,7 +25,8 @@ export function useRenderIcon(icon: string): Component {
|
||||
render() {
|
||||
return h(FontIcon, {
|
||||
icon: iconName,
|
||||
iconType
|
||||
iconType,
|
||||
...attrs
|
||||
});
|
||||
}
|
||||
});
|
||||
@ -31,7 +38,8 @@ export function useRenderIcon(icon: string): Component {
|
||||
name: "Icon",
|
||||
render() {
|
||||
return h(IconifyIconOffline, {
|
||||
icon: icon
|
||||
icon: icon,
|
||||
...attrs
|
||||
});
|
||||
}
|
||||
});
|
||||
|
@ -51,9 +51,11 @@ addIcon("notebook", Notebook);
|
||||
import arrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
|
||||
import arrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line";
|
||||
import logoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
|
||||
import nodeTree from "@iconify-icons/ri/node-tree";
|
||||
addIcon("arrow-right-s-line", arrowRightSLine);
|
||||
addIcon("arrow-left-s-line", arrowLeftSLine);
|
||||
addIcon("logout-circle-r-line", logoutCircleRLine);
|
||||
addIcon("node-tree", nodeTree);
|
||||
|
||||
// Font Awesome 4
|
||||
import faUser from "@iconify-icons/fa/user";
|
||||
|
18
src/components/ReIcon/src/types.ts
Normal file
18
src/components/ReIcon/src/types.ts
Normal file
@ -0,0 +1,18 @@
|
||||
export interface iconType {
|
||||
// iconify (https://docs.iconify.design/icon-components/vue/#properties)
|
||||
inline?: boolean;
|
||||
width?: string | number;
|
||||
height?: string | number;
|
||||
horizontalFlip?: boolean;
|
||||
verticalFlip?: boolean;
|
||||
flip?: string;
|
||||
rotate?: number | string;
|
||||
color?: string;
|
||||
horizontalAlign?: boolean;
|
||||
verticalAlign?: boolean;
|
||||
align?: string;
|
||||
onLoad?: Function;
|
||||
|
||||
// all icon
|
||||
style?: object;
|
||||
}
|
@ -46,6 +46,19 @@
|
||||
--el-button-active-border-color: var(--el-color-primary-active) !important;
|
||||
}
|
||||
|
||||
/* button--primary plain */
|
||||
.el-button--primary.is-plain {
|
||||
--el-button-bg-color: var(--el-color-primary-light-9) !important;
|
||||
--el-button-border-color: var(--el-color-primary-light-6) !important;
|
||||
--el-button-hover-bg-color: var(--el-color-primary-light-1) !important;
|
||||
--el-button-hover-border-color: var(--el-color-primary) !important;
|
||||
--el-button-active-bg-color: var(--el-color-primary) !important;
|
||||
--el-button-active-border-color: var(--el-color-primary) !important;
|
||||
--el-button-text-color: var(--el-color-primary) !important;
|
||||
--el-button-hover-text-color: var(--el-color-white) !important;
|
||||
--el-button-active-text-color: var(--el-color-white) !important;
|
||||
}
|
||||
|
||||
/* nprogress适配ep的primary */
|
||||
#nprogress {
|
||||
& .bar {
|
||||
|
@ -23,16 +23,6 @@
|
||||
margin-left: $sideBarWidth;
|
||||
position: relative;
|
||||
background: #f0f2f5;
|
||||
@media screen and (min-width: 150px) and (max-width: 420px) {
|
||||
.app-main .el-scrollbar__view:first-child {
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 420px) {
|
||||
.app-main .el-scrollbar__view:first-child {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixed-header {
|
||||
|
@ -7,6 +7,7 @@ export default {
|
||||
<script setup lang="ts">
|
||||
import { ref, unref } from "vue";
|
||||
import { storageSession } from "/@/utils/storage";
|
||||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
||||
|
||||
let purview = ref<string>(storageSession.getItem("info").username);
|
||||
|
||||
@ -36,6 +37,11 @@ function changRole() {
|
||||
查看左侧菜单变化(系统管理),模拟后台根据不同角色返回对应路由
|
||||
</p>
|
||||
</h4>
|
||||
<el-button type="primary" @click="changRole">切换角色</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="changRole"
|
||||
:icon="useRenderIcon('user', { color: '#fff' })"
|
||||
>切换角色</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
Loading…
Reference in New Issue
Block a user