178 lines
3.3 KiB
Vue
178 lines
3.3 KiB
Vue
<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>
|