From e1023bb3313282b00d6dcdefd5d7e30d7aaa1bfc Mon Sep 17 00:00:00 2001
From: 疯狂的狮子Li <15040126243@163.com>
Date: 星期四, 30 十一月 2023 11:13:29 +0800
Subject: [PATCH] update 优化 代码中存在的警告
---
src/components/IconSelect/index.vue | 43 ++++++++++++++++++++++---------------------
1 files changed, 22 insertions(+), 21 deletions(-)
diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue
index 330c44f..1cd0023 100644
--- a/src/components/IconSelect/index.vue
+++ b/src/components/IconSelect/index.vue
@@ -2,7 +2,7 @@
<div class="relative" :style="{ width: width }">
<el-input v-model="modelValue" readonly @click="visible = !visible" placeholder="鐐瑰嚮閫夋嫨鍥炬爣">
<template #prepend>
- <svg-icon :icon-class="modelValue as string"></svg-icon>
+ <svg-icon :icon-class="modelValue" />
</template>
</el-input>
@@ -19,7 +19,7 @@
<el-scrollbar height="w-[200px]">
<ul class="icon-list">
<el-tooltip v-for="(iconName, index) in iconNames" :key="index" :content="iconName" placement="bottom" effect="light">
- <li class="icon-item" @click="selectedIcon(iconName)">
+ <li :class="['icon-item', {active: modelValue == iconName}]" @click="selectedIcon(iconName)">
<svg-icon color="var(--el-text-color-regular)" :icon-class="iconName" />
</li>
</el-tooltip>
@@ -31,17 +31,11 @@
<script setup lang="ts">
import icons from '@/components/IconSelect/requireIcons';
+import { propTypes } from '@/utils/propTypes';
const props = defineProps({
- modelValue: {
- type: String,
- require: true
- },
- width: {
- type: String,
- require: false,
- default: '400px'
- }
+ modelValue: propTypes.string.isRequired,
+ width: propTypes.string.def('400px')
});
const emit = defineEmits(['update:modelValue']);
@@ -55,26 +49,29 @@
* 绛涢�夊浘鏍�
*/
const filterIcons = () => {
- if (filterValue.value) {
- iconNames.value = icons.filter(iconName =>
- iconName.includes(filterValue.value)
- );
- } else {
- iconNames.value = icons;
- }
+ if (filterValue.value) {
+ iconNames.value = icons.filter(iconName =>
+ iconName.includes(filterValue.value)
+ );
+ } else {
+ iconNames.value = icons;
+ }
}
-
/**
* 閫夋嫨鍥炬爣
* @param iconName 閫夋嫨鐨勫浘鏍囧悕绉�
*/
const selectedIcon = (iconName: string) => {
- emit('update:modelValue', iconName);
- visible.value = false;
+ emit('update:modelValue', iconName);
+ visible.value = false;
}
</script>
<style scoped lang="scss">
+.el-scrollbar {
+ max-height: calc(50vh - 100px)!important;
+ overflow-y: auto;
+}
.el-divider--horizontal {
margin: 10px auto !important;
}
@@ -101,5 +98,9 @@
transform: scaleX(1.1);
}
}
+ .active {
+ border-color: var(--el-color-primary);
+ color: var(--el-color-primary);
+ }
}
</style>
--
Gitblit v1.9.3