当前位置: 首页 > news >正文

vue3+element-plus icons图标选择组件封装

一、最终效果

在这里插入图片描述

二、参数配置

1、代码示例

<t-select-icon v-model="selectVlaue" />

2、配置参数(Attributes)继承 el-input Attributes

参数说明类型默认值
v-model绑定值string-
prefixIcon输入框前缀iconstringSearch
isShowSearch是否显示搜索图标Booleantrue
isShowIcon是否显示选中后的图标Booleantrue
selectBindAttributesselectBind"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、配置参数&#xff08;Attributes&#xff09;继承 el-input Attributes 参数说明类型默认值v-model绑定值string-prefixIcon输入框前缀iconstringSearchisShowSearch是否显…...

Spring validation校验框架

第1步&#xff1a;导入依赖 <!-- 校验框架--> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId> </dependency> 第2步&#xff1a;为需要校验的参数&…...

UBUNTU20.04安装CH384串口卡驱动

继续上文&#xff1a;统信UOS安装CH384串口卡驱动-CSDN博客 统信UOS系统成功安装CH384串口驱动后&#xff0c;继续在ubuntu20.04下安装驱动&#xff0c;发现一直报错&#xff0c;原因是内核驱动不一致。 解决办法&#xff1a; 1. 下载最新的驱动。CH35XCH384驱动源文件资源-C…...

JWT(JSON Web Tokens) 详细介绍

文章目录 什么是JWT?JWT的组成部分JWT的使用场景优点缺点 Java中如何实现JWT编解码引入JJWT依赖编码JWT解码JWT使用示例 什么是JWT? JWT&#xff08;JSON Web Tokens&#xff09;是一种用于双方之间安全传输信息的简洁的、URL安全的令牌标准。JWT可以传递信息&#xff0c;这…...

数据结构练习题————(二叉树)——考前必备合集!

今天在牛客网和力扣上带来了数据结构中二叉树的进阶练习题 1.二叉搜索树与双向链表———二叉搜索树与双向链表_牛客题霸_牛客网 (nowcoder.com) 2.二叉树遍历————二叉树遍历_牛客题霸_牛客网 (nowcoder.com) 3.二叉树的层序遍历————102. 二叉树的层序遍历 - 力扣&am…...

一天认识一个硬件之鼠标

今天来给大家分享一下鼠标的相关内容&#xff0c;先来分享一下什么是鼠标&#xff1a; 鼠标是一种计算机输入设备&#xff0c;用于控制屏幕上的光标移动和进行各种操作。它最早由道格拉斯恩格尔巴特在1963年发明&#xff0c;并在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…...

轮播图组件更加完善版

依然是基于微博语法开发&#xff0c;使用时请注意标签替换 优化了滑动的效果&#xff0c;默认的索引&#xff0c;滑动距离等&#xff0c; 使用方式和以前一样没变&#xff0c;主要修改了组件内部 <template><wbx-view class"" style"width: 100vw;heig…...

cpu路、核、线程

路&#xff1a;主板插口实际插入的 CPU 个数&#xff0c;也可以理解为主板上支持的CPU的数量。每个CPU插槽可以插入一个物理处理器芯片。例如&#xff0c;一台服务器可能有2路或4路插槽&#xff0c;这意味着它最多可以安装2个或4个物理处理器。 核&#xff1a;单块 CPU 上面能…...

鸿蒙开发(NEXT/API 12)【硬件(注册出行业务事件监听)】车载系统

注册出行业务事件监听&#xff0c;用于接收业务发送事件的通知。 接口说明 接口名描述[on] (type: ‘smartMobilityEvent’, smartMobilityTypes: SmartMobilityType[],callback: Callback): void应用注册出行业务事件监听。 开发步骤 导入Car Kit模块。 import { smartMobi…...

安卓中有main函数吗?

在标准的Android应用程序开发中&#xff0c;并不直接使用类似于传统Java或C程序中的main函数入口点。Android应用程序是基于组件的架构&#xff0c;它依赖于几个关键组件来执行不同的任务&#xff0c;这些组件包括Activity、Service、Broadcast Receiver和Content Provider。 …...

js-17-对数组、对象进行浅拷贝和深拷贝

目录 数组一、浅拷贝1. 展开运算符...2. Array.prototype.slice() 二、深拷贝1. JSON方法2. 递归函数 对象一、浅拷贝1. Object.assign()2. 展开运算符... 二、深拷贝1. JSON方法2. 递归函数 自己总结的一些方法&#xff0c;可能有不到位的地方&#xff0c;欢迎指出 数组 一、…...

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 #注意&#xff0c;Nodejs官网的安装命令少了下面这一行: …...

CPU中也应用到了缓存:CPU3层高速缓存,以及它的缓存一致性问题、MESI协议和Java的一些应用

为什么需要cpu高速缓存&#xff1f; 缓存&#xff0c;一般是为了用来协调两端的数据传输效率差&#xff08;也可以归纳为性能差&#xff09;&#xff0c;提升响应速度。那么CPU的高速缓存是用来协调什么之间的速度差呢&#xff1f; CPU在处理一条指令的时候&#xff0c;会读写…...

如何使用开发者工具捕获鼠标右键点击事件

要使用浏览器的开发者工具捕获鼠标右键点击事件,请按照以下步骤操作: 打开开发者工具 在大多数浏览器中,您可以按 F12 键或右键单击页面并选择"检查"或"检查元素"。 切换到 Console 标签页 在开发者工具中,找到并点击 “Console” 标签。 添加事件监听器…...

【几何】个人练习-Leetcode-1453. Maximum Number of Darts Inside of a Circular Dartboard

题目链接&#xff1a;https://leetcode.cn/problems/maximum-number-of-darts-inside-of-a-circular-dartboard/description/ 题目大意&#xff1a;给出一系列点和一个圆的半径&#xff0c;&#xff08;寻找一个圆心&#xff09;求这个半径的圆最多能覆盖多少个点。 思路&…...

啤酒:从饮品到文化的演变

在人类饮品的长河中&#xff0c;啤酒以其不同的魅力走过了一段漫长的历史旅程。它不仅仅是一种简单的饮品&#xff0c;更是一种文化的象征&#xff0c;一种生活的态度。今天&#xff0c;我们将一起追溯啤酒从单一的饮品到丰富文化的演变过程&#xff0c;并感受Fendi Club精酿啤…...

Java 中 Map 常用类和数据结构详解

1. 引言 在Java编程中&#xff0c;Map是一种重要的数据结构&#xff0c;广泛应用于各种场景&#xff0c;Map实现了键值对&#xff08;key-value&#xff09;的存储方式&#xff0c;使得开发者能够快速检索、更新和操作数据。本篇文章将详细讲解Java中常用的Map类及其底层数据结…...

实时监控,动态调整 —— 淘宝商品详情API助力商家实现灵活经营

在讨论实时监控和动态调整的策略时&#xff0c;虽然我不能直接提供淘宝商品详情API的具体代码&#xff08;因为这通常涉及商业机密和API密钥等敏感信息&#xff09;&#xff0c;但我可以给出一个概念性的示例&#xff0c;说明如何使用这类API来辅助商家实现灵活经营。 概念性示…...

WebGL常用接口和事件

目录 初始化WebGL上下文清除缓冲区缓冲区对象着色器和程序属性指针渲染事件监听错误处理纹理映射...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

SciencePlots——绘制论文中的图片

文章目录 安装一、风格二、1 资源 安装 # 安装最新版 pip install githttps://github.com/garrettj403/SciencePlots.git# 安装稳定版 pip install SciencePlots一、风格 简单好用的深度学习论文绘图专用工具包–Science Plot 二、 1 资源 论文绘图神器来了&#xff1a;一行…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

渲染学进阶内容——模型

最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

SpringTask-03.入门案例

一.入门案例 启动类&#xff1a; package com.sky;import lombok.extern.slf4j.Slf4j; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.cache.annotation.EnableCach…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

今日学习:Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存

文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...