From 6e7acd5062824d5aae2ed345898d761a93879de0 Mon Sep 17 00:00:00 2001 From: heimawl <1785969728@qq.com> Date: 星期五, 02 六月 2023 17:16:31 +0800 Subject: [PATCH] 组件库整理,依赖安装、excel导入导入方法整理 --- src/components/IconSelect/index.vue | 88 +++++++++++++++++++++++++------------------ 1 files changed, 51 insertions(+), 37 deletions(-) diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue index b0ec9fa..aa8d5a6 100644 --- a/src/components/IconSelect/index.vue +++ b/src/components/IconSelect/index.vue @@ -1,12 +1,24 @@ <!-- @author zhengjie --> +<!-- 鑷畾涔夊浘鏍囧悕绉板皝瑁� --> <template> <div class="icon-body"> - <el-input v-model="name" style="position: relative;" clearable placeholder="璇疯緭鍏ュ浘鏍囧悕绉�" @clear="filterIcons" @input.native="filterIcons"> + <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;" /> + <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> @@ -14,55 +26,57 @@ </template> <script> -import icons from './requireIcons' +import icons from "./requireIcons"; export default { - name: 'IconSelect', + name: "IconSelect", data() { return { - name: '', - iconList: icons - } + name: "", + iconList: icons, + }; }, methods: { filterIcons() { - this.iconList = icons + this.iconList = icons; if (this.name) { - this.iconList = this.iconList.filter(item => item.includes(this.name)) + this.iconList = this.iconList.filter((item) => + item.includes(this.name) + ); } }, selectedIcon(name) { - this.$emit('selected', name) - document.body.click() + this.$emit("selected", name); + document.body.click(); }, reset() { - this.name = '' - this.iconList = icons - } - } -} + 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; - } +.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