feat: arco-icon组件
This commit is contained in:
WANGFAN\wangf
parent
0bcbadb5cc
commit
f8f1870a0e
2
src/components.d.ts
vendored
2
src/components.d.ts
vendored
@ -15,6 +15,8 @@ declare module 'vue' {
|
||||
MainTransition: typeof import('./components/main-transition/index.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
SelectIcon: typeof import('./components/select-icon/index.vue')['default']
|
||||
SvgAndIcon: typeof import('./components/svg-and-icon/index.vue')['default']
|
||||
SvgIcon: typeof import('./components/svg-icon/index.vue')['default']
|
||||
VerifyCode: typeof import('./components/verify-code/index.vue')['default']
|
||||
}
|
||||
|
||||
103
src/components/select-icon/index.vue
Normal file
103
src/components/select-icon/index.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<a-modal v-model:visible="visible" width="70vw" :top="'50px'" :align-center="false" :footer="false">
|
||||
<template #title> 请选择图标 </template>
|
||||
<a-input
|
||||
:style="{
|
||||
width: '100%',
|
||||
marginBottom: '14px'
|
||||
}"
|
||||
placeholder="请输入关键词搜索"
|
||||
allow-clear
|
||||
v-model="searchName"
|
||||
>
|
||||
<template #prefix>
|
||||
<icon-search />
|
||||
</template>
|
||||
</a-input>
|
||||
<div class="over-scroll">
|
||||
<div class="icon-grid">
|
||||
<div v-for="item in iconList" :key="item" class="grid-item" @click="onIcon(item)">
|
||||
<component :is="item" :size="30"></component>
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="iconList.length === 0" class="empty-row">
|
||||
<a-empty>
|
||||
<template #image>
|
||||
<icon-exclamation-circle-fill />
|
||||
</template>
|
||||
<span>未查询到您要找的图标</span>
|
||||
</a-empty>
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as ArcoIcons from "@arco-design/web-vue/es/icon";
|
||||
const emit = defineEmits(["select"]);
|
||||
|
||||
const searchName = ref<string>("");
|
||||
const iconList = computed(() => {
|
||||
if (!ArcoIcons) return [];
|
||||
let icons: string[] = [];
|
||||
for (let key in ArcoIcons) {
|
||||
if (key != "default") {
|
||||
icons.push(key);
|
||||
}
|
||||
}
|
||||
if (searchName.value) {
|
||||
return icons.filter(item => item.toLowerCase().includes(searchName.value.toLowerCase()));
|
||||
}
|
||||
return icons;
|
||||
});
|
||||
|
||||
const onIcon = (item: string) => {
|
||||
visible.value = false;
|
||||
emit("select", item);
|
||||
};
|
||||
|
||||
const visible = ref(false);
|
||||
|
||||
const open = () => {
|
||||
searchName.value = "";
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
open
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.over-scroll {
|
||||
max-height: 70vh;
|
||||
overflow: auto;
|
||||
.icon-grid {
|
||||
overflow: hidden;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 150px); /* 自适应填充列，每列宽为 150px */
|
||||
justify-content: space-evenly; /* 水平均匀分配列之间的空隙 */
|
||||
.grid-item {
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: $margin;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 0.2s ease-in-out; /* 添加过渡效果 */
|
||||
&:hover {
|
||||
transform: scale(1.3); /* 鼠标移入时放大到 1.3 倍 */
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-row {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
19
src/components/svg-and-icon/index.vue
Normal file
19
src/components/svg-and-icon/index.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<template>
|
||||
<SvgIcon v-if="props.svgIcon" :name="props.svgIcon" :size="25" />
|
||||
<component v-else-if="props.icon" :is="props.icon" :size="25"></component>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps({
|
||||
svgIcon: {
|
||||
type: String,
|
||||
default: ""
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@ -28,6 +28,7 @@ export default {
|
||||
["draggable"]: "draggable",
|
||||
["editor"]: "editor",
|
||||
["newbie"]: "newbie",
|
||||
["icon-component"]: "icon component",
|
||||
["user-center"]: "user center",
|
||||
["markdown"]: "Markdown",
|
||||
["custom-instruction"]: "custom instruction",
|
||||
|
||||
@ -28,6 +28,7 @@ export default {
|
||||
["draggable"]: "拖拽",
|
||||
["editor"]: "富文本",
|
||||
["newbie"]: "新手指引",
|
||||
["icon-component"]: "icon组件",
|
||||
["user-center"]: "用户中心",
|
||||
["markdown"]: "Markdown",
|
||||
["custom-instruction"]: "自定义指令",
|
||||
|
||||
@ -388,6 +388,23 @@ export const dynamicRoutes: RouteRecordRaw[] = [
|
||||
sort: 5
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/common-component/icon-component",
|
||||
name: "icon-component",
|
||||
component: () => import("@/views/common-component/icon-component/icon-component.vue"),
|
||||
meta: {
|
||||
title: "icon-component",
|
||||
hide: false,
|
||||
disable: false,
|
||||
keepAlive: true,
|
||||
affix: false,
|
||||
link: "",
|
||||
iframe: false,
|
||||
roles: ["admin"],
|
||||
icon: "icon-menu",
|
||||
sort: 6
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/common-component/user-center",
|
||||
name: "user-center",
|
||||
@ -402,7 +419,7 @@ export const dynamicRoutes: RouteRecordRaw[] = [
|
||||
iframe: false,
|
||||
roles: ["admin"],
|
||||
icon: "icon-menu",
|
||||
sort: 6
|
||||
sort: 7
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
51
src/views/common-component/icon-component/icon-component.vue
Normal file
51
src/views/common-component/icon-component/icon-component.vue
Normal file
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="snow-page">
|
||||
<div class="snow-inner-page">
|
||||
<div class="title">图标选择器</div>
|
||||
<a-input
|
||||
:style="{ width: '400px' }"
|
||||
placeholder="请选择图标"
|
||||
allow-clear
|
||||
v-model="iconName"
|
||||
@focus="onFocus"
|
||||
@clear="onClear"
|
||||
>
|
||||
<template #suffix v-if="iconName">
|
||||
<component :is="iconName"></component>
|
||||
</template>
|
||||
</a-input>
|
||||
<a-divider />
|
||||
<div class="target-title">当前选择的图标：</div>
|
||||
<component v-if="iconName" :is="iconName" size="50"></component>
|
||||
<a-empty v-else />
|
||||
<SelectIcon ref="SelectIconRef" @select="select" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const iconName = ref<string>("");
|
||||
const SelectIconRef = ref();
|
||||
const onFocus = () => {
|
||||
SelectIconRef.value.open();
|
||||
};
|
||||
const onClear = () => {
|
||||
console.log("请？");
|
||||
iconName.value = "";
|
||||
};
|
||||
|
||||
const select = (icon: string) => {
|
||||
iconName.value = icon;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
color: $color-text-1;
|
||||
font-size: $font-size-title-1;
|
||||
margin-bottom: $margin;
|
||||
}
|
||||
.target-title {
|
||||
margin-bottom: $margin;
|
||||
}
|
||||
</style>
|
||||
@ -2,43 +2,46 @@
|
||||
<div class="snow-page">
|
||||
<div class="snow-inner-page">
|
||||
<a-space direction="vertical">
|
||||
<a-typography id="myTypography" :style="{ marginTop: '-40px' }">
|
||||
<a-typography-title :heading="2">ArcoDesign</a-typography-title>
|
||||
<a-typography-paragraph>
|
||||
The ArcoDesign component library defines a set of default particle variables, and a custom theme is to
|
||||
<a-typography-text mark>customize</a-typography-text> and
|
||||
<a-typography-text underline>overwrite</a-typography-text> this variable list.
|
||||
</a-typography-paragraph>
|
||||
<a-typography-paragraph blockquote>
|
||||
A design is a plan or specification for the construction of an object or system or for the implementation of an
|
||||
activity or process, or the result of that plan or specification in the form of a
|
||||
<a-typography-text code>prototype</a-typography-text>, <a-typography-text code>product</a-typography-text> or
|
||||
<a-typography-text code>process</a-typography-text>. The verb to design expresses the process of developing a design.
|
||||
</a-typography-paragraph>
|
||||
<a-typography-paragraph mark underline delete>
|
||||
A design is a plan or specification for the construction of an object or system or for the implementation of an
|
||||
activity or process.
|
||||
</a-typography-paragraph>
|
||||
<a-typography-paragraph>
|
||||
<ul>
|
||||
<li>
|
||||
Architectural blueprints
|
||||
<ul>
|
||||
<li>Architectural blueprints</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Engineering drawings</li>
|
||||
<li>Business processes</li>
|
||||
</ul>
|
||||
</a-typography-paragraph>
|
||||
<a-typography-paragraph>
|
||||
<ol>
|
||||
<li>Architectural blueprints</li>
|
||||
<li>Engineering drawings</li>
|
||||
<li>Business processes</li>
|
||||
</ol>
|
||||
</a-typography-paragraph>
|
||||
</a-typography>
|
||||
<div style="margin-top: -40px">
|
||||
<a-typography id="myTypography">
|
||||
<a-typography-title :heading="2">ArcoDesign</a-typography-title>
|
||||
<a-typography-paragraph>
|
||||
The ArcoDesign component library defines a set of default particle variables, and a custom theme is to
|
||||
<a-typography-text mark>customize</a-typography-text> and
|
||||
<a-typography-text underline>overwrite</a-typography-text> this variable list.
|
||||
</a-typography-paragraph>
|
||||
<a-typography-paragraph blockquote>
|
||||
A design is a plan or specification for the construction of an object or system or for the implementation of an
|
||||
activity or process, or the result of that plan or specification in the form of a
|
||||
<a-typography-text code>prototype</a-typography-text>, <a-typography-text code>product</a-typography-text> or
|
||||
<a-typography-text code>process</a-typography-text>. The verb to design expresses the process of developing a
|
||||
design.
|
||||
</a-typography-paragraph>
|
||||
<a-typography-paragraph mark underline delete>
|
||||
A design is a plan or specification for the construction of an object or system or for the implementation of an
|
||||
activity or process.
|
||||
</a-typography-paragraph>
|
||||
<a-typography-paragraph>
|
||||
<ul>
|
||||
<li>
|
||||
Architectural blueprints
|
||||
<ul>
|
||||
<li>Architectural blueprints</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Engineering drawings</li>
|
||||
<li>Business processes</li>
|
||||
</ul>
|
||||
</a-typography-paragraph>
|
||||
<a-typography-paragraph>
|
||||
<ol>
|
||||
<li>Architectural blueprints</li>
|
||||
<li>Engineering drawings</li>
|
||||
<li>Business processes</li>
|
||||
</ol>
|
||||
</a-typography-paragraph>
|
||||
</a-typography>
|
||||
</div>
|
||||
<a-button type="primary" @click="onPrint">打印</a-button>
|
||||
<div>采用开源打印库：<a-link href="https://printjs.crabbly.com/" target="_blank">printjs</a-link></div>
|
||||
</a-space>
|
||||
@ -50,7 +53,14 @@
|
||||
import print from "print-js";
|
||||
|
||||
const onPrint = () => {
|
||||
print("myTypography", "html");
|
||||
print({
|
||||
printable: "myTypography", // id节点
|
||||
type: "html", // 打印方式，这里选择html
|
||||
header: "", // 是否定义头部，这里选择不定义
|
||||
scanStyles: false, // 当设置为 false 时，库将不会处理应用于正在打印的 html 的样式，转而使用style自定义样式
|
||||
maxWidth: 9999, // 页面最大宽度
|
||||
targetStyles: ["*"]
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user