lbqms-ui.git - Gitblit

			@@ -1,6 +1,6 @@
			<template>
			<div class="relative" :style="{ width: width }">
			<el-input v-model="modelValue" readonly @click="visible = !visible" placeholder="点击选择图标">
			<el-input v-model="modelValue" readonly placeholder="点击选择图标" @click="visible = !visible">
			<template #prepend>
			<svg-icon :icon-class="modelValue" />
			</template>
			@@ -8,18 +8,18 @@

			<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]">
			<div class="cursor-pointer text-[#999] absolute right-[10px] top-0 height-[32px] leading-[32px]" @click="visible = !visible">
			<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-input v-model="filterValue" class="p-2" 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', {active: modelValue == iconName}]" @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>
			@@ -50,13 +50,11 @@
			*/
			const filterIcons = () => {
			if (filterValue.value) {
			iconNames.value = icons.filter(iconName =>
			iconName.includes(filterValue.value)
			);
			iconNames.value = icons.filter((iconName) => iconName.includes(filterValue.value));
			} else {
			iconNames.value = icons;
			}
			}
			};
			/**
			* 选择图标
			* @param iconName 选择的图标名称
			@@ -64,12 +62,12 @@
			const selectedIcon = (iconName: string) => {
			emit('update:modelValue', iconName);
			visible.value = false;
			}
			};
			</script>

			<style scoped lang="scss">
			.el-scrollbar {
			max-height: calc(50vh - 100px)!important;
			max-height: calc(50vh - 100px) !important;
			overflow-y: auto;
			}
			.el-divider--horizontal {
			@@ -99,8 +97,8 @@
			}
			}
			.active {
			border-color: var(--el-color-primary);
			color: var(--el-color-primary);
			}
			border-color: var(--el-color-primary);
			color: var(--el-color-primary);
			}
			}
			</style>