vue3+element-plus icons图标选择组件封装
一、最终效果

二、参数配置
1、代码示例
<t-select-icon v-model="selectVlaue" />
2、配置参数(Attributes)继承 el-input Attributes
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| v-model | 绑定值 | string | - |
| prefixIcon | 输入框前缀icon | string | Search |
| isShowSearch | 是否显示搜索图标 | Boolean | true |
| isShowIcon | 是否显示选中后的图标 | Boolean | true |
| selectBind | Attributes | selectBind | "prefix-icon": props.prefixIcon, placeholder: "请选择图标",dialogTitle:'请选择图标',clearable: true,width: "50%" |
3、events
| 事件名 | 说明 | 返回值 |
|---|---|---|
| select | 选择完图标 | 返回选中的图标name |
三、源码
<template><div class="t_select_icon"><el-inputref="inputRef"v-model="valueIcon"v-bind="attrs"@clear="clearIcon"@click="() => {;(dialogVisible = true), (inputValue = '')}"><template #append v-if="isShowIcon"><el-button :icon="customIcons[modelValue]" /></template></el-input><el-dialog v-model="dialogVisible" :title="attrs.dialogTitle" draggable :width="attrs.width"><el-inputv-model="inputValue"v-if="isShowSearch":placeholder="attrs.searchPlaceholder"clearable:prefix-icon="Icons.Search"/><el-scrollbar v-if="Object.keys(iconsList).length"><div class="icon-list"><divv-for="item in iconsList":key="item"class="icon-item":class="{ 'icon-active': item.name == valueIcon }"@click="selectIcon(item)"><component :is="item"></component><span>{{ item.name }}</span></div></div></el-scrollbar><el-empty :description="attrs.emptyDescription" v-else /></el-dialog></div>
</template><script setup lang="ts" name="TSelectIcon">
import { ref, computed, useAttrs } from "vue"
import * as Icons from "@element-plus/icons-vue"const props = defineProps({modelValue: {type: String,default: ""},prefixIcon: {type: String,default: "Search"},selectBind: Object,isShowSearch: {type: Boolean,default: true},isShowIcon: {type: Boolean,default: true}
})
const emit = defineEmits(["update:modelValue", "select"])
// v-model简写
let valueIcon = computed({get() {return props.modelValue},set(val) {// console.log("v-model简写", val);emit("update:modelValue", val)}
})
const $attrs: any = useAttrs()
const attrs = computed(() => {const selectBind = {"prefix-icon": customIcons[props.prefixIcon],placeholder: "请选择图标",dialogTitle: "请选择图标",searchPlaceholder: "搜索图标",emptyDescription: "未搜索到您要找的图标",clearable: true,width: "50%",...props.selectBind}return { ...$attrs, ...selectBind }
})
// open Dialog
const dialogVisible = ref(false)// 选择图标
const selectIcon = (item: any) => {dialogVisible.value = falsevalueIcon.value = item.nameemit("update:modelValue", item.name)emit("select", item.name)
}// 清空图标
const inputRef = ref()
const clearIcon = () => {valueIcon.value = ""emit("update:modelValue", "")setTimeout(() => inputRef.value.blur(), 0)
}// 监听搜索框值
const inputValue = ref("")
const customIcons: { [key: string]: any } = Icons
const iconsList = computed((): { [key: string]: any } => {if (!inputValue.value) return Iconslet result: { [key: string]: any } = {}for (const key in customIcons) {if (key.toLowerCase().indexOf(inputValue.value.toLowerCase()) > -1)result[key] = customIcons[key]}return result
})
</script><style scoped lang="scss">
.t_select_icon {width: 100%;.el-button {display: flex;align-items: center;justify-content: center;font-size: 18px;color: var(--el-text-color-regular);:deep(.el-icon) {color: var(--el-color-primary);}}:deep(.el-dialog__body) {padding: 25px 20px 20px;.el-input {margin-bottom: 10px;}.icon-list {display: grid;grid-template-columns: repeat(auto-fill, 115px);justify-content: space-evenly;max-height: 60vh;.icon-item {display: flex;flex-direction: column;align-items: center;width: 42px;padding: 20px 30px;cursor: pointer;transition: all 0.2s;svg {width: 30px;height: 30px;}&:hover {transform: scale(1.3);}&.icon-active {color: var(--el-color-primary);}span {margin-top: 5px;line-height: 20px;text-align: center;}}}}
}
</style>
六、组件地址
gitHub组件地址
gitee码云组件地址
七、相关文章
基于ElementUi&antdUi再次封装基础组件文档
vue3+ts基于Element-plus再次封装基础组件文档
相关文章:
vue3+element-plus icons图标选择组件封装
一、最终效果 二、参数配置 1、代码示例 <t-select-icon v-model"selectVlaue" />2、配置参数(Attributes)继承 el-input Attributes 参数说明类型默认值v-model绑定值string-prefixIcon输入框前缀iconstringSearchisShowSearch是否显…...
Spring validation校验框架
第1步:导入依赖 <!-- 校验框架--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId> </dependency> 第2步:为需要校验的参数&…...
UBUNTU20.04安装CH384串口卡驱动
继续上文:统信UOS安装CH384串口卡驱动-CSDN博客 统信UOS系统成功安装CH384串口驱动后,继续在ubuntu20.04下安装驱动,发现一直报错,原因是内核驱动不一致。 解决办法: 1. 下载最新的驱动。CH35XCH384驱动源文件资源-C…...
JWT(JSON Web Tokens) 详细介绍
文章目录 什么是JWT?JWT的组成部分JWT的使用场景优点缺点 Java中如何实现JWT编解码引入JJWT依赖编码JWT解码JWT使用示例 什么是JWT? JWT(JSON Web Tokens)是一种用于双方之间安全传输信息的简洁的、URL安全的令牌标准。JWT可以传递信息,这…...
数据结构练习题————(二叉树)——考前必备合集!
今天在牛客网和力扣上带来了数据结构中二叉树的进阶练习题 1.二叉搜索树与双向链表———二叉搜索树与双向链表_牛客题霸_牛客网 (nowcoder.com) 2.二叉树遍历————二叉树遍历_牛客题霸_牛客网 (nowcoder.com) 3.二叉树的层序遍历————102. 二叉树的层序遍历 - 力扣&am…...
一天认识一个硬件之鼠标
今天来给大家分享一下鼠标的相关内容,先来分享一下什么是鼠标: 鼠标是一种计算机输入设备,用于控制屏幕上的光标移动和进行各种操作。它最早由道格拉斯恩格尔巴特在1963年发明,并在1968年12月9日制成了世界上第一个鼠标。介绍完了…...
Django 请求配置
http请求配置 请求流程 urls.py配置 from first_app import viewsurlpatterns [path(admin/, admin.site.urls),path(test/,views.first_test), ] views.py配置 from django.shortcuts import render,HttpResponse# Create your views here. def first_test(request):prin…...
轮播图组件更加完善版
依然是基于微博语法开发,使用时请注意标签替换 优化了滑动的效果,默认的索引,滑动距离等, 使用方式和以前一样没变,主要修改了组件内部 <template><wbx-view class"" style"width: 100vw;heig…...
cpu路、核、线程
路:主板插口实际插入的 CPU 个数,也可以理解为主板上支持的CPU的数量。每个CPU插槽可以插入一个物理处理器芯片。例如,一台服务器可能有2路或4路插槽,这意味着它最多可以安装2个或4个物理处理器。 核:单块 CPU 上面能…...
鸿蒙开发(NEXT/API 12)【硬件(注册出行业务事件监听)】车载系统
注册出行业务事件监听,用于接收业务发送事件的通知。 接口说明 接口名描述[on] (type: ‘smartMobilityEvent’, smartMobilityTypes: SmartMobilityType[],callback: Callback): void应用注册出行业务事件监听。 开发步骤 导入Car Kit模块。 import { smartMobi…...
安卓中有main函数吗?
在标准的Android应用程序开发中,并不直接使用类似于传统Java或C程序中的main函数入口点。Android应用程序是基于组件的架构,它依赖于几个关键组件来执行不同的任务,这些组件包括Activity、Service、Broadcast Receiver和Content Provider。 …...
js-17-对数组、对象进行浅拷贝和深拷贝
目录 数组一、浅拷贝1. 展开运算符...2. Array.prototype.slice() 二、深拷贝1. JSON方法2. 递归函数 对象一、浅拷贝1. Object.assign()2. 展开运算符... 二、深拷贝1. JSON方法2. 递归函数 自己总结的一些方法,可能有不到位的地方,欢迎指出 数组 一、…...
Ubuntu24.04中安装Electron
1. 安装Nodejs 使用代理服务从github下载并执行Nodejs安装脚本(假设代理服务器为192.168.2.150:10792) curl -x 192.168.2.150:10792 -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash #注意,Nodejs官网的安装命令少了下面这一行: …...
CPU中也应用到了缓存:CPU3层高速缓存,以及它的缓存一致性问题、MESI协议和Java的一些应用
为什么需要cpu高速缓存? 缓存,一般是为了用来协调两端的数据传输效率差(也可以归纳为性能差),提升响应速度。那么CPU的高速缓存是用来协调什么之间的速度差呢? CPU在处理一条指令的时候,会读写…...
如何使用开发者工具捕获鼠标右键点击事件
要使用浏览器的开发者工具捕获鼠标右键点击事件,请按照以下步骤操作: 打开开发者工具 在大多数浏览器中,您可以按 F12 键或右键单击页面并选择"检查"或"检查元素"。 切换到 Console 标签页 在开发者工具中,找到并点击 “Console” 标签。 添加事件监听器…...
【几何】个人练习-Leetcode-1453. Maximum Number of Darts Inside of a Circular Dartboard
题目链接:https://leetcode.cn/problems/maximum-number-of-darts-inside-of-a-circular-dartboard/description/ 题目大意:给出一系列点和一个圆的半径,(寻找一个圆心)求这个半径的圆最多能覆盖多少个点。 思路&…...
啤酒:从饮品到文化的演变
在人类饮品的长河中,啤酒以其不同的魅力走过了一段漫长的历史旅程。它不仅仅是一种简单的饮品,更是一种文化的象征,一种生活的态度。今天,我们将一起追溯啤酒从单一的饮品到丰富文化的演变过程,并感受Fendi Club精酿啤…...
Java 中 Map 常用类和数据结构详解
1. 引言 在Java编程中,Map是一种重要的数据结构,广泛应用于各种场景,Map实现了键值对(key-value)的存储方式,使得开发者能够快速检索、更新和操作数据。本篇文章将详细讲解Java中常用的Map类及其底层数据结…...
实时监控,动态调整 —— 淘宝商品详情API助力商家实现灵活经营
在讨论实时监控和动态调整的策略时,虽然我不能直接提供淘宝商品详情API的具体代码(因为这通常涉及商业机密和API密钥等敏感信息),但我可以给出一个概念性的示例,说明如何使用这类API来辅助商家实现灵活经营。 概念性示…...
WebGL常用接口和事件
目录 初始化WebGL上下文清除缓冲区缓冲区对象着色器和程序属性指针渲染事件监听错误处理纹理映射...
为什么JavaScript无法访问用户电脑的硬件信息
JavaScript和硬件信息访问:安全和信任的博弈许多人想知道:为什么JavaScript不能访问用户计算机的硬件信息?答案与安全和信任机制密切相关。虽然本地客户端软件可以访问硬件信息,但这是基于用户对软件的信任和授权。浏览器和客户端…...
Phi-4-mini-reasoning应用场景:密码学协议安全性逻辑推演与攻击路径模拟
Phi-4-mini-reasoning应用场景:密码学协议安全性逻辑推演与攻击路径模拟 1. 模型概述 Phi-4-mini-reasoning是由微软开发的3.8B参数轻量级开源模型,专为数学推理、逻辑推导和多步解题等强逻辑任务设计。该模型主打"小参数、强推理、长上下文、低延…...
物理信息神经网络PINN求解二维Helmholtz方程的Python torch实现
💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…...
麦克风效率革命:MicMute让静音操作提速90%的终极体验升级
麦克风效率革命:MicMute让静音操作提速90%的终极体验升级 【免费下载链接】MicMute Mute default mic clicking tray icon or shortcut 项目地址: https://gitcode.com/gh_mirrors/mi/MicMute 你是否经历过线上会议中手忙脚乱寻找静音按钮的窘迫?…...
扩散浓度曲线计算:从实例看 Pandat 代算与自行操作
扩散浓度曲线计算(Pandat代算或自己操作) 实例33: Al-4.06at%Mg/Al扩散偶在781K下退火36960s,Mg元素浓度随距离的变化曲线及实验数据对比如图a所示;Al-11at%Mg/Al扩散偶在773K下退火86400s,Mg元素浓度随距离的变化曲线及实验对比如图b所示&am…...
Rust重写GNU核心工具集:现代CLI工具的终极指南
Rust重写GNU核心工具集:现代CLI工具的终极指南 【免费下载链接】coreutils 跨平台的 Rust 重写 GNU 核心工具集。 项目地址: https://gitcode.com/GitHub_Trending/co/coreutils 在当今的软件开发领域,命令行工具仍然是系统管理员、开发者和DevOp…...
ESP32/ESP8266轻量级HA MQTT自动发现C++库
1. 项目概述 HA MQTT Discovery 是一个专为嵌入式平台(特别是 ESP32/ESP8266)设计的轻量级 C 库,用于实现与 Home Assistant 的原生 MQTT 自动发现(Auto-Discovery)协议兼容的设备与实体注册。其核心目标并非替代完整…...
误删Anaconda?3步极速抢救指南
Anaconda被误删后抢救手册技术文章大纲数据恢复的基本原理解释数据恢复的底层机制,包括文件系统如何处理删除操作,以及为何被删除的数据仍有可能恢复。涵盖不同操作系统(Windows、macOS、Linux)下的差异。立即停止使用受影响磁盘强…...
CPCIe507全国产信号处理板卡:FT-M6678+JFM7VX690T互联调试
CPCIe507 为标准的6U CPCIe 板卡,采用全国产芯片设计。出于匠行科技技术团队。主处理器采用复旦微电子FPGA JFM7VX690T36和长城银河多核 DSP FT-M6678N,二者之间通过SRIO x5 互联。板卡对外高速接口为PCIe3.0 x4、预留GTH x4,低速接口RS422 x…...
check-dev-env - 开发环境依赖检测技能
check-dev-env - 开发环境依赖检测技能 技能概述 check-dev-env 是一个用于自动检查开发环境中常见依赖项是否已安装的 AI Agent 技能。该技能能够快速验证 Java、Maven、Node.js、NPM、Go、Python、Git 等主流开发工具的安装状态和版本号。 📋 元信息 项目说明技…...
