From 8a1c08baaf0ee002b471996b195e7da180b90209 Mon Sep 17 00:00:00 2001
From: feige <791364011@qq.com>
Date: 星期一, 21 七月 2025 09:38:47 +0800
Subject: [PATCH] 增加了前端代码库
---
src/views/tool/build/IconsDialog.vue | 123 +++++++++++++++++++++++++++++++++++++++++
1 files changed, 123 insertions(+), 0 deletions(-)
diff --git a/src/views/tool/build/IconsDialog.vue b/src/views/tool/build/IconsDialog.vue
new file mode 100644
index 0000000..958be50
--- /dev/null
+++ b/src/views/tool/build/IconsDialog.vue
@@ -0,0 +1,123 @@
+<template>
+ <div class="icon-dialog">
+ <el-dialog
+ v-bind="$attrs"
+ width="980px"
+ :modal-append-to-body="false"
+ v-on="$listeners"
+ @open="onOpen"
+ @close="onClose"
+ >
+ <div slot="title">
+ 閫夋嫨鍥炬爣
+ <el-input
+ v-model="key"
+ size="mini"
+ :style="{width: '260px'}"
+ placeholder="璇疯緭鍏ュ浘鏍囧悕绉�"
+ prefix-icon="el-icon-search"
+ clearable
+ />
+ </div>
+ <ul class="icon-ul">
+ <li
+ v-for="icon in iconList"
+ :key="icon"
+ :class="active===icon?'active-item':''"
+ @click="onSelect(icon)"
+ >
+ <i :class="icon" />
+ <div>{{ icon }}</div>
+ </li>
+ </ul>
+ </el-dialog>
+ </div>
+</template>
+<script>
+import iconList from '@/utils/generator/icon.json'
+
+const originList = iconList.map(name => `el-icon-${name}`)
+
+export default {
+ inheritAttrs: false,
+ props: ['current'],
+ data() {
+ return {
+ iconList: originList,
+ active: null,
+ key: ''
+ }
+ },
+ watch: {
+ key(val) {
+ if (val) {
+ this.iconList = originList.filter(name => name.indexOf(val) > -1)
+ } else {
+ this.iconList = originList
+ }
+ }
+ },
+ methods: {
+ onOpen() {
+ this.active = this.current
+ this.key = ''
+ },
+ onClose() {},
+ onSelect(icon) {
+ this.active = icon
+ this.$emit('select', icon)
+ this.$emit('update:visible', false)
+ }
+ }
+}
+</script>
+<style lang="scss" scoped>
+.icon-ul {
+ margin: 0;
+ padding: 0;
+ font-size: 0;
+ li {
+ list-style-type: none;
+ text-align: center;
+ font-size: 14px;
+ display: inline-block;
+ width: 16.66%;
+ box-sizing: border-box;
+ height: 108px;
+ padding: 15px 6px 6px 6px;
+ cursor: pointer;
+ overflow: hidden;
+ &:hover {
+ background: #f2f2f2;
+ }
+ &.active-item{
+ background: #e1f3fb;
+ color: #7a6df0
+ }
+ > i {
+ font-size: 30px;
+ line-height: 50px;
+ }
+ }
+}
+.icon-dialog {
+ ::v-deep .el-dialog {
+ border-radius: 8px;
+ margin-bottom: 0;
+ margin-top: 4vh !important;
+ display: flex;
+ flex-direction: column;
+ max-height: 92vh;
+ overflow: hidden;
+ box-sizing: border-box;
+ .el-dialog__header {
+ padding-top: 14px;
+ }
+ .el-dialog__body {
+ margin: 0 20px 20px 20px;
+ padding: 0;
+ overflow: auto;
+ }
+ }
+}
+</style>
--
Gitblit v1.9.1