From 3c4fee1db116c11d4f04727cfe076d7c94daeaf2 Mon Sep 17 00:00:00 2001 From: yanzhaofeige <yanzhaofeige@qq.com> Date: Mon, 30 Sep 2024 12:10:57 +0800 Subject: [PATCH] init --- cpzidc-ui/src/components/IconSelect/index.vue | 104 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 104 insertions(+), 0 deletions(-) diff --git a/cpzidc-ui/src/components/IconSelect/index.vue b/cpzidc-ui/src/components/IconSelect/index.vue new file mode 100644 index 0000000..8dadc02 --- /dev/null +++ b/cpzidc-ui/src/components/IconSelect/index.vue @@ -0,0 +1,104 @@ +<!-- @author zhengjie --> +<template> + <div class="icon-body"> + <el-input v-model="name" class="icon-search" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="filterIcons"> + <i slot="suffix" class="el-icon-search el-input__icon" /> + </el-input> + <div class="icon-list"> + <div class="list-container"> + <div v-for="(item, index) in iconList" class="icon-item-wrapper" :key="index" @click="selectedIcon(item)"> + <div :class="['icon-item', { active: activeIcon === item }]"> + <svg-icon :icon-class="item" class-name="icon" style="height: 25px;width: 16px;"/> + <span>{{ item }}</span> + </div> + </div> + </div> + </div> + </div> +</template> + +<script> +import icons from './requireIcons' +export default { + name: 'IconSelect', + props: { + activeIcon: { + type: String + } + }, + 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-search { + position: relative; + margin-bottom: 5px; + } + .icon-list { + height: 200px; + overflow: auto; + .list-container { + display: flex; + flex-wrap: wrap; + .icon-item-wrapper { + width: calc(100% / 3); + height: 25px; + line-height: 25px; + cursor: pointer; + display: flex; + .icon-item { + display: flex; + max-width: 100%; + height: 100%; + padding: 0 5px; + &:hover { + background: #ececec; + border-radius: 5px; + } + .icon { + flex-shrink: 0; + } + span { + display: inline-block; + vertical-align: -0.15em; + fill: currentColor; + padding-left: 2px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + .icon-item.active { + background: #ececec; + border-radius: 5px; + } + } + } + } + } +</style> -- Gitblit v1.9.3