feat: icons
This commit is contained in:
Jachin
parent
ad33ebcbd4
commit
e3e2955966
|
|
@ -78,6 +78,32 @@ const data = {
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/icon",
|
||||
component: "Layout",
|
||||
redirect: "/icon/index",
|
||||
meta: {
|
||||
title: "系统管理",
|
||||
icon: "system",
|
||||
hidden: false,
|
||||
roles: ["ADMIN"],
|
||||
keepAlive: true,
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "index",
|
||||
component: "demo/icons",
|
||||
name: "Icons",
|
||||
meta: {
|
||||
title: "图标",
|
||||
icon: "icon",
|
||||
hidden: false,
|
||||
roles: ["ADMIN"],
|
||||
keepAlive: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: "/api",
|
||||
component: "Layout",
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@
|
|||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "^2.1.0",
|
||||
"@vitejs/plugin-vue": "^4.2.3",
|
||||
"@vueuse/core": "^10.1.2",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
<svg width="128" height="128" xmlns="http://www.w3.org/2000/svg"><path d="M115.147.062a13 13 0 0 1 4.94.945c1.55.63 2.907 1.526 4.069 2.688a13.148 13.148 0 0 1 2.761 4.069c.678 1.55 1.017 3.245 1.017 5.086v102.3c0 3.681-1.187 6.733-3.56 9.155-2.373 2.422-5.352 3.633-8.937 3.633H12.992c-3.875 0-7-1.26-9.373-3.779-2.373-2.518-3.56-5.667-3.56-9.445V12.704c0-3.39 1.163-6.345 3.488-8.863C5.872 1.32 8.972.062 12.847.062h102.3zM81.434 109.047c1.744 0 3.003-.412 3.778-1.235.775-.824 1.163-1.914 1.163-3.27 0-1.26-.388-2.325-1.163-3.197-.775-.872-2.034-1.307-3.778-1.307H72.57c.097-.194.145-.485.145-.872V27.09h9.01c1.743 0 2.954-.436 3.633-1.308.678-.872 1.017-1.938 1.017-3.197 0-1.26-.34-2.325-1.017-3.197-.679-.872-1.89-1.308-3.633-1.308H46.268c-1.743 0-2.954.436-3.632 1.308-.678.872-1.018 1.938-1.018 3.197 0 1.26.34 2.325 1.018 3.197.678.872 1.889 1.308 3.632 1.308h8.138v72.075c0 .193.024.339.073.436.048.096.072.242.072.436H46.56c-1.744 0-3.003.435-3.778 1.307-.775.872-1.163 1.938-1.163 3.197 0 1.356.388 2.446 1.163 3.27.775.823 2.034 1.235 3.778 1.235h34.875z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -52,6 +52,24 @@ export const constantRoutes: RouteRecordRaw[] = [
|
|||
],
|
||||
},
|
||||
|
||||
{
|
||||
path: "/permission",
|
||||
component: Layout,
|
||||
redirect: "/permission/page",
|
||||
children: [
|
||||
{
|
||||
path: "page",
|
||||
component: () => import("@/views/permission/page.vue"),
|
||||
name: "PermissionPage",
|
||||
meta: {
|
||||
title: "Permission",
|
||||
icon: "password",
|
||||
keepAlive: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
// 外部链接
|
||||
// {
|
||||
// path: "/external-link",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,177 @@
|
|||
<template>
|
||||
<div class="icons-container">
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="Icons">
|
||||
<div class="grid">
|
||||
<div
|
||||
v-for="item of svg_icons"
|
||||
:key="item"
|
||||
@click="handleClipboard(generateIconCode(item), $event)"
|
||||
>
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="generateIconCode(item)"
|
||||
placement="top"
|
||||
>
|
||||
<div class="icon-item">
|
||||
<svg-icon :icon-class="item" />
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Element-UI Icons">
|
||||
<div class="grid">
|
||||
<div
|
||||
v-for="(icon, name) of icons"
|
||||
:key="name"
|
||||
@click="handleClipboard(generateElementIconCode(name), $event)"
|
||||
>
|
||||
<el-tooltip
|
||||
effect="dark"
|
||||
:content="generateElementIconCode(name)"
|
||||
placement="top"
|
||||
>
|
||||
<div class="icon-item">
|
||||
<el-icon :size="20">
|
||||
<component :is="icon" />
|
||||
</el-icon>
|
||||
<span>{{ name }}</span>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import SvgIcon from "@/components/SvgIcon/index.vue";
|
||||
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
|
||||
|
||||
defineOptions({
|
||||
// eslint-disable-next-line
|
||||
name: "Icons",
|
||||
inheritAttrs: false,
|
||||
});
|
||||
const svg_icons: string[] = [
|
||||
"advert",
|
||||
"api",
|
||||
"brand",
|
||||
"bug",
|
||||
"cascader",
|
||||
"chart",
|
||||
"client",
|
||||
"close",
|
||||
"close_all",
|
||||
"close_left",
|
||||
"close_other",
|
||||
"close_right",
|
||||
"coupon",
|
||||
"dashboard",
|
||||
"dict",
|
||||
"dict_item",
|
||||
"document",
|
||||
"download",
|
||||
"drag",
|
||||
"edit",
|
||||
"exit-fullscreen",
|
||||
"eye-open",
|
||||
"eye",
|
||||
"fullscreen",
|
||||
"github",
|
||||
"goods-list",
|
||||
"goods",
|
||||
"guide",
|
||||
"homepage",
|
||||
"lab",
|
||||
"language",
|
||||
"link",
|
||||
"menu",
|
||||
"message",
|
||||
"money",
|
||||
"monitor",
|
||||
"multi_level",
|
||||
"nested",
|
||||
"number",
|
||||
"order",
|
||||
"password",
|
||||
"peoples",
|
||||
"perm",
|
||||
"publish",
|
||||
"rabbitmq",
|
||||
"rate",
|
||||
"redis",
|
||||
"refresh",
|
||||
"role",
|
||||
"security",
|
||||
"shopping",
|
||||
"size",
|
||||
"skill",
|
||||
"system",
|
||||
"theme",
|
||||
"tree",
|
||||
"user",
|
||||
"uv",
|
||||
"valid_code",
|
||||
"verify_code",
|
||||
];
|
||||
const icons = ref(ElementPlusIconsVue);
|
||||
|
||||
const { text, isSupported, copy } = useClipboard();
|
||||
|
||||
function generateIconCode(symbol) {
|
||||
return `<svg-icon icon-class="${symbol}" />`;
|
||||
}
|
||||
|
||||
function generateElementIconCode(symbol) {
|
||||
return `<el-icon><${symbol} /></el-icon>`;
|
||||
}
|
||||
|
||||
function handleClipboard(text, event) {
|
||||
// clipboard(text, event);
|
||||
copy(text)
|
||||
.then(() => {
|
||||
ElMessage.success("Copy successfully");
|
||||
})
|
||||
.catch(() => {
|
||||
ElMessage.warning("Copy failed");
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icons-container {
|
||||
margin: 10px 20px 0;
|
||||
overflow: hidden;
|
||||
|
||||
.grid {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
}
|
||||
|
||||
.icon-item {
|
||||
float: left;
|
||||
width: 100px;
|
||||
height: 85px;
|
||||
margin: 20px;
|
||||
font-size: 30px;
|
||||
color: #24292e;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue