|
|
@@ -1,25 +1,37 @@
|
|
|
<template>
|
|
|
<hc-new-dialog v-model="isShow" is-table :footer="false" widths="1200px" title="图标选择" @close="menuIconClose">
|
|
|
- <el-scrollbar class="hc-menu-icon-box">
|
|
|
- <div class="hc-menu-icon">
|
|
|
- <el-row :gutter="10">
|
|
|
- <el-col v-for="item in icons" :key="item" :span="4">
|
|
|
- <div class="icon-item" @click="iconClick(item)">
|
|
|
- <div class="icon">
|
|
|
- <hc-icon :name="item" />
|
|
|
- </div>
|
|
|
- <div class="name">{{ item }}</div>
|
|
|
- </div>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
+ <div class="hc-menu-icon-box h-full">
|
|
|
+ <div class="hc-icon-search">
|
|
|
+ <el-input v-model="iconKey" placeholder="请输入图标英文关键词进行筛选" clearable @input="iconInput">
|
|
|
+ <template #prefix>
|
|
|
+ <hc-icon name="search" />
|
|
|
+ </template>
|
|
|
+ </el-input>
|
|
|
</div>
|
|
|
- </el-scrollbar>
|
|
|
+ <div class="hc-icon-content">
|
|
|
+ <el-scrollbar>
|
|
|
+ <div class="hc-menu-icon">
|
|
|
+ <el-row :gutter="10">
|
|
|
+ <el-col v-for="item in iconList" :key="item" :span="4">
|
|
|
+ <div class="icon-item" @click="iconClick(item)">
|
|
|
+ <div class="icon">
|
|
|
+ <hc-icon :name="item" />
|
|
|
+ </div>
|
|
|
+ <div class="name">{{ item }}</div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</hc-new-dialog>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { onMounted, ref } from 'vue'
|
|
|
import { getRemixicon } from '~api/other'
|
|
|
+import { deepClone } from 'js-fast-way'
|
|
|
|
|
|
//事件
|
|
|
const emit = defineEmits(['finish', 'close'])
|
|
|
@@ -49,6 +61,18 @@ const initIcon = async () => {
|
|
|
matches.push(match[1])
|
|
|
}
|
|
|
icons.value = matches
|
|
|
+ iconList.value = deepClone(matches)
|
|
|
+}
|
|
|
+
|
|
|
+//搜索图标
|
|
|
+const iconKey = ref('')
|
|
|
+const iconList = ref([])
|
|
|
+const iconInput = (val) => {
|
|
|
+ if (val) {
|
|
|
+ iconList.value = icons.value.filter(item => item.includes(val))
|
|
|
+ } else {
|
|
|
+ iconList.value = deepClone(icons.value)
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
//点击图标
|
|
|
@@ -65,35 +89,46 @@ const menuIconClose = () => {
|
|
|
|
|
|
<style lang="scss">
|
|
|
.hc-menu-icon-box {
|
|
|
- .el-scrollbar__bar.is-vertical {
|
|
|
- right: -8px;
|
|
|
+ position: relative;
|
|
|
+ .hc-icon-search {
|
|
|
+ position: relative;
|
|
|
+ border-bottom: 1px solid #e9e9e9;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
}
|
|
|
- .hc-menu-icon {
|
|
|
- overflow: hidden;
|
|
|
- .icon-item {
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- background-color: rgba(0,0,0,.02);
|
|
|
- border-radius: 3px;
|
|
|
- padding: 10px 0;
|
|
|
- margin-right: 10px;
|
|
|
- margin-top: 10px;
|
|
|
- cursor: pointer;
|
|
|
- transition: all 0.6s ease;
|
|
|
- .icon {
|
|
|
- font-size: 24px;
|
|
|
- color: #1A1A1A;
|
|
|
- }
|
|
|
- .name {
|
|
|
- font-weight: normal;
|
|
|
- padding: 10px 0 5px 0;
|
|
|
- color: #8c8c8c;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 12px;
|
|
|
- opacity: 0.8;
|
|
|
- }
|
|
|
- &:hover {
|
|
|
- background-color: rgba(0,0,0,.06);
|
|
|
+ .hc-icon-content {
|
|
|
+ position: relative;
|
|
|
+ height: calc(100% - 75px);
|
|
|
+ .el-scrollbar__bar.is-vertical {
|
|
|
+ right: -8px;
|
|
|
+ }
|
|
|
+ .hc-menu-icon {
|
|
|
+ overflow: hidden;
|
|
|
+ .icon-item {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ background-color: rgba(0,0,0,.02);
|
|
|
+ border-radius: 3px;
|
|
|
+ padding: 10px 0;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-top: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.6s ease;
|
|
|
+ .icon {
|
|
|
+ font-size: 24px;
|
|
|
+ color: #1A1A1A;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ font-weight: normal;
|
|
|
+ padding: 10px 0 5px 0;
|
|
|
+ color: #8c8c8c;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 12px;
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ background-color: rgba(0,0,0,.06);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
