From c25842a0e5cb8d1c4b9ee80e38dbfc4192b95adb Mon Sep 17 00:00:00 2001 From: LiuHao <liuhaoai545@gmail> Date: 星期一, 17 四月 2023 20:50:00 +0800 Subject: [PATCH] remove console.log --- src/components/IconSelect/index.vue | 98 ++++++++++++++++++++++++------------------------ 1 files changed, 49 insertions(+), 49 deletions(-) diff --git a/src/components/IconSelect/index.vue b/src/components/IconSelect/index.vue index 97c601e..330c44f 100644 --- a/src/components/IconSelect/index.vue +++ b/src/components/IconSelect/index.vue @@ -1,16 +1,47 @@ +<template> + <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> + </template> + </el-input> + + <el-popover shadow="none" :visible="visible" placement="bottom-end" trigger="click" :width="450"> + <template #reference> + <div @click="visible = !visible" class="cursor-pointer text-[#999] absolute right-[10px] top-0 height-[32px] leading-[32px]"> + <i-ep-caret-top v-show="visible"></i-ep-caret-top> + <i-ep-caret-bottom v-show="!visible"></i-ep-caret-bottom> + </div> + </template> + + <el-input class="p-2" v-model="filterValue" placeholder="鎼滅储鍥炬爣" clearable @input="filterIcons" /> + + <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)"> + <svg-icon color="var(--el-text-color-regular)" :icon-class="iconName" /> + </li> + </el-tooltip> + </ul> + </el-scrollbar> + </el-popover> + </div> +</template> + <script setup lang="ts"> import icons from '@/components/IconSelect/requireIcons'; const props = defineProps({ - modelValue: { - type: String, - require: true - }, - width: { - type: String, - require: false, - default: '400px' - } + modelValue: { + type: String, + require: true + }, + width: { + type: String, + require: false, + default: '400px' + } }); const emit = defineEmits(['update:modelValue']); @@ -24,13 +55,13 @@ * 绛涢�夊浘鏍� */ 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; + } } /** @@ -38,41 +69,10 @@ * @param iconName 閫夋嫨鐨勫浘鏍囧悕绉� */ const selectedIcon = (iconName: string) => { - emit('update:modelValue', iconName); - visible.value = false; + emit('update:modelValue', iconName); + visible.value = false; } </script> - -<template> - <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> - </template> - </el-input> - - <el-popover shadow="none" :visible="visible" placement="bottom-end" trigger="click" :width="450"> - <template #reference> - <div @click="visible = !visible" class="cursor-pointer text-[#999] absolute right-[10px] top-0 height-[32px] leading-[32px]"> - <i-ep-caret-top v-show="visible"></i-ep-caret-top> - <i-ep-caret-bottom v-show="!visible"></i-ep-caret-bottom> - </div> - </template> - - <el-input class="p-2" v-model="filterValue" placeholder="鎼滅储鍥炬爣" clearable @input="filterIcons" /> - - <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)"> - <svg-icon color="var(--el-text-color-regular)" :icon-class="iconName" /> - </li> - </el-tooltip> - </ul> - </el-scrollbar> - </el-popover> - </div> -</template> <style scoped lang="scss"> .el-divider--horizontal { -- Gitblit v1.9.3