|
|
@@ -1,109 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="icon-select">
|
|
|
- <!-- <el-input v-model="iconName" :disabled="disabled" clearable placeholder="请输入图标名称" @clear="filterIcons" @input="filterIcons">-->
|
|
|
- <!-- <template #suffix><i class="el-icon-search el-input__icon" /></template>-->
|
|
|
- <!-- </el-input>-->
|
|
|
- <svg-icon class="local_icon" :icon-class="iconName" />
|
|
|
- <div class="icon-select__list">
|
|
|
- <div
|
|
|
- v-for="(item, index) in iconList"
|
|
|
- :key="index"
|
|
|
- :title="item"
|
|
|
- :class="`item ${item === iconName ? 'active' : ''}`"
|
|
|
- @click="updateIcon(item)"
|
|
|
- >
|
|
|
- <svg-icon class="local_icon" :icon-class="item" />
|
|
|
- <span class="text text-overflow_ellipsis">{{ item }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script setup lang="ts">
|
|
|
-import { ref, watch } from 'vue'
|
|
|
-const props = defineProps({
|
|
|
- modelValue: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- },
|
|
|
- disabled: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- }
|
|
|
-})
|
|
|
-const icons = [] as string[]
|
|
|
-const modules = import.meta.glob('../../assets/icons/*.svg')
|
|
|
-for (const path in modules) {
|
|
|
- const p = path.split('assets/icons/')[1].split('.svg')[0]
|
|
|
- icons.push(p)
|
|
|
-}
|
|
|
-const iconList = ref(icons)
|
|
|
-
|
|
|
-const iconName = ref('')
|
|
|
-watch(
|
|
|
- () => props.modelValue,
|
|
|
- (val: string) => {
|
|
|
- iconName.value = val
|
|
|
- }
|
|
|
-)
|
|
|
-const emit = defineEmits(['update:modelValue'])
|
|
|
-
|
|
|
-function filterIcons() {
|
|
|
- iconList.value = icons
|
|
|
- if (iconName.value) {
|
|
|
- iconList.value = icons.filter(item => item.indexOf(iconName.value) !== -1)
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-function updateIcon(name: string) {
|
|
|
- emit('update:modelValue', name)
|
|
|
- iconName.value = name
|
|
|
- document.body.click()
|
|
|
-}
|
|
|
-
|
|
|
-function reset() {
|
|
|
- iconName.value = ''
|
|
|
- iconList.value = icons
|
|
|
-}
|
|
|
-
|
|
|
-defineExpose({
|
|
|
- reset
|
|
|
-})
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.icon-select {
|
|
|
- width: 100%;
|
|
|
- //padding: 10px;
|
|
|
-
|
|
|
- &__list {
|
|
|
- margin-top: 8px;
|
|
|
- height: 200px;
|
|
|
- overflow-y: scroll;
|
|
|
-
|
|
|
- .item {
|
|
|
- height: 30px;
|
|
|
- line-height: 30px;
|
|
|
- margin-bottom: -5px;
|
|
|
- cursor: pointer;
|
|
|
- width: 33.33%;
|
|
|
- float: left;
|
|
|
- color: #999;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- //justify-content: ;
|
|
|
- &.active {
|
|
|
- color: var(--el-color-primary);
|
|
|
- }
|
|
|
- }
|
|
|
- .local_icon {
|
|
|
- height: 30px;
|
|
|
- width: 16px;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- .text {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
lanceJiang