parent
8b2a395c16
commit
c1b5a51a3d
|
|
@ -1,36 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="container">
|
|
||||||
<div class="flex jc-e">
|
|
||||||
<el-input v-model="searchText" placeholder="请输入图标名称" class="search-text" clearable>
|
|
||||||
<template #prefix>
|
|
||||||
<icon name="search" size="18" class="c-pointer"></icon>
|
|
||||||
</template>
|
|
||||||
</el-input>
|
|
||||||
</div>
|
|
||||||
<el-scrollbar height="440px">
|
|
||||||
<el-row v-if="icon_list.length > 0" class="icon-row mt-20" :gutter="20">
|
|
||||||
<el-col v-for="item in icon_list" :key="item.unicode" :span="3">
|
|
||||||
<div class="icon-item" @click="search_icon_click(item.font_class)">
|
|
||||||
<i :class="`iconfont icon-${item.font_class}`"></i>
|
|
||||||
<div class="text-line-1 size-14">{{ item.name }}</div>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<div v-else>
|
|
||||||
<no-data height="500"></no-data>
|
|
||||||
</div>
|
|
||||||
</el-scrollbar>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script setup lang="ts">
|
|
||||||
import searchIcons from '@/assets/search-icons/iconfont.json';
|
|
||||||
// 搜索
|
|
||||||
const searchText = ref('');
|
|
||||||
const icon_list = computed(() => searchIcons.glyphs.filter((item) => item.name.includes(searchText.value)));
|
|
||||||
const icon_class = defineModel('icon_class', { type: String, default: '' });
|
|
||||||
const search_icon_click = (item: any) => {
|
|
||||||
icon_class.value = item;
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
|
||||||
Loading…
Reference in New Issue