From 1b555a0ab0527478cdf2b0c31c0ea8aea70f8adc Mon Sep 17 00:00:00 2001
From: yxh <172933527@qq.com>
Date: 星期四, 15 六月 2023 10:52:39 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master' into yxh01
---
src/components/IconSelect/index.vue | 82 +++++++++++++++++++++++++++++++++++++++++
1 files changed, 82 insertions(+), 0 deletions(-)
diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue
new file mode 100644
index 0000000..aa8d5a6
--- /dev/null
+++ b/src/components/IconSelect/index.vue
@@ -0,0 +1,82 @@
+<!-- @author zhengjie -->
+<!-- 鑷畾涔夊浘鏍囧悕绉板皝瑁� -->
+<template>
+ <div class="icon-body">
+ <el-input
+ v-model="name"
+ style="position: relative"
+ clearable
+ placeholder="璇疯緭鍏ュ浘鏍囧悕绉�"
+ @clear="filterIcons"
+ @input.native="filterIcons"
+ >
+ <i slot="suffix" class="el-icon-search el-input__icon" />
+ </el-input>
+ <div class="icon-list">
+ <div
+ v-for="(item, index) in iconList"
+ :key="index"
+ @click="selectedIcon(item)"
+ >
+ <svg-icon :icon-class="item" style="height: 30px; width: 16px" />
+ <span>{{ item }}</span>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import icons from "./requireIcons";
+export default {
+ name: "IconSelect",
+ data() {
+ return {
+ name: "",
+ iconList: icons,
+ };
+ },
+ methods: {
+ filterIcons() {
+ this.iconList = icons;
+ if (this.name) {
+ this.iconList = this.iconList.filter((item) =>
+ item.includes(this.name)
+ );
+ }
+ },
+ selectedIcon(name) {
+ this.$emit("selected", name);
+ document.body.click();
+ },
+ reset() {
+ this.name = "";
+ this.iconList = icons;
+ },
+ },
+};
+</script>
+
+<style rel="stylesheet/scss" lang="scss" scoped>
+.icon-body {
+ width: 100%;
+ padding: 10px;
+ .icon-list {
+ height: 200px;
+ overflow-y: scroll;
+ div {
+ height: 30px;
+ line-height: 30px;
+ margin-bottom: -5px;
+ cursor: pointer;
+ width: 33%;
+ float: left;
+ }
+ span {
+ display: inline-block;
+ vertical-align: -0.15em;
+ fill: currentColor;
+ overflow: hidden;
+ }
+ }
+}
+</style>
--
Gitblit v1.9.3