element-plus——图标推荐

以下是 Element Plus 中适合编辑页面使用的图标组件示例:

<!-- 编辑相关 -->
<el-icon><Edit /></el-icon>                <!-- 基础编辑图标 -->
<el-icon><EditPen /></el-icon>             <!-- 钢笔样式编辑图标 -->
<el-icon><EditUnderline /></el-icon>       <!-- 下划线编辑图标 --><!-- 内容操作 -->
<el-icon><Plus /></el-icon>                <!-- 添加图标 -->
<el-icon><Minus /></el-icon>               <!-- 减少/删除图标 -->
<el-icon><Delete /></el-icon>              <!-- 删除图标 -->
<el-icon><Copy /></el-icon>                <!-- 复制图标 -->
<el-icon><Cut /></el-icon>                 <!-- 剪切图标 -->
<el-icon><Paste /></el-icon>               <!-- 粘贴图标 --><!-- 状态操作 -->
<el-icon><Check /></el-icon>                <!-- 确认/保存图标 -->
<el-icon><Close /></el-icon>                <!-- 取消/关闭图标 -->
<el-icon><Undo /></el-icon>                 <!-- 撤销操作 -->
<el-icon><Redo /></el-icon>                 <!-- 重做操作 --><!-- 格式设置 -->
<el-icon><Bold /></el-icon>                 <!-- 粗体格式 -->
<el-icon><Italic /></el-icon>               <!-- 斜体格式 -->
<el-icon><FontColor /></el-icon>            <!-- 字体颜色设置 -->
<el-icon><AlignLeft /></el-icon>            <!-- 左对齐 -->
<el-icon><AlignCenter /></el-icon>          <!-- 居中对齐 -->
<el-icon><AlignRight /></el-icon>           <!-- 右对齐 --><!-- 其他常用 -->
<el-icon><Refresh /></el-icon>              <!-- 刷新内容 -->
<el-icon><Save /></el-icon>                 <!-- 保存操作 -->
<el-icon><Search /></el-icon>               <!-- 搜索功能 -->
<el-icon><Expand /></el-icon>               <!-- 展开内容 -->
<el-icon><Collapse /></el-icon>             <!-- 折叠内容 -->
  • 数据操作场景1：
    • 添加数据：推荐使用<el-icon><Plus /></el-icon>，直观表示添加操作，常用于表单添加按钮、列表添加项按钮等位置。
    • 编辑数据：<el-icon><Edit /></el-icon>或<el-icon><EditPen /></el-icon>比较合适，如在表格中每行的操作列，点击该图标可进入该行数据的编辑状态。
    • 删除数据：可使用<el-icon><Delete /></el-icon>或<el-icon><Minus /></el-icon>，通常用于表格、列表项的删除按钮，提示用户执行删除操作。
  • 状态指示场景1：
    • 保存成功：<el-icon><Check /></el-icon>能很好地表示操作成功，比如在表单提交后，若保存成功可显示该图标给予用户反馈。
    • 操作取消：适合用<el-icon><Close /></el-icon>，如在弹出的编辑窗口中，点击取消按钮时可展示此图标。
    • 加载中：可考虑自定义一个加载中的图标，或者使用 Element Plus 的加载组件配合图标，如<el-loading><el-icon><Loading /></el-icon></el-loading>，用于表示数据加载、操作处理等正在进行的状态。
  • 格式设置场景1：
    • 文本加粗：使用<el-icon><Bold /></el-icon>，在文本编辑区域，可用于表示设置文本为粗体的功能按钮。
    • 文本颜色：推荐<el-icon><FontColor /></el-icon>，点击可弹出颜色选择器，让用户设置文本颜色。
    • 对齐方式：<el-icon><AlignLeft /></el-icon>、<el-icon><AlignCenter /></el-icon>、<el-icon><AlignRight /></el-icon>分别用于表示左对齐、居中对齐、右对齐，常在富文本编辑等场景中使用。
  • 导航与布局场景1：
    • 展开内容：<el-icon><Expand /></el-icon>可用于表示展开折叠面板、菜单等内容，点击后显示更多信息。
    • 折叠内容：搭配<el-icon><Collapse /></el-icon>，与展开图标对应，用于将展开的内容收起。
    • 返回上一级：若有层级导航，可使用<el-icon><ArrowUp /></el-icon>或<el-icon><ArrowLeft /></el-icon>表示返回上一级页面或菜单。
  • 搜索与筛选场景1：
    • 搜索：<el-icon><Search /></el-icon>是经典的搜索图标，常用于搜索框旁，提示用户可进行搜索操作。
    • 筛选：可使用<el-icon><Filter /></el-icon>，表示对数据进行筛选，一般在表格、列表上方的筛选条件区域使用。

这些图标组件都需要先从 Element Plus 中导入才能使用，例如：

import { Edit, Plus, Delete, Check, Undo, Redo } from '@element-plus/icons-vue'

Element Plus 的图标库是可以进行扩展的：

1. 使用第三方图标库（推荐）

Element Plus 支持与主流第三方图标库结合使用，无需复杂配置即可扩展图标资源：

  • Font Awesome：最常用的图标库之一，包含大量通用图标

<!-- 引入 Font Awesome CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css"><!-- 在 Element 组件中使用 -->
<el-button icon="fa fa-github">GitHub</el-button>

Iconfont（阿里图标库）：可自定义上传图标，支持生成项目专属图标库

<!-- 引入自定义 Iconfont 样式 -->
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_xxxxxxx.css"><!-- 使用方式 -->
<el-icon><i class="iconfont icon-my-custom-icon"></i></el-icon>
<el-button icon="iconfont icon-add"></el-button>

2. 注册自定义 SVG 图标

如果需要使用自己设计的 SVG 图标，可以通过 Element Plus 提供的 Icon 组件注册为全局可用的图标：

// 导入 Element Plus 的 createApp 和 Icon 组件
import { createApp } from 'vue'
import { Icon } from 'element-plus'
import App from './App.vue'// 定义自定义 SVG 图标（例如一个"代码"图标）
const CodeIcon = {render: () => h('svg', {width: '1em',height: '1em',viewBox: '0 0 1024 1024',xmlns: 'http://www.w3.org/2000/svg'}, [h('path', {d: 'M854.6 288.6L639.4 73.4c-6-6-14.1-9.4-22.6-9.4H192c-17.7 0-32 14.3-32 32v832c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V311.2c0-8.5-3.4-16.7-9.4-22.6zM790.2 866H233.8V156h301.7l254.7 254.7V866z',fill: 'currentColor'})])
}const app = createApp(App)
// 全局注册自定义图标，使用时通过 name 调用
app.component('CodeIcon', CodeIcon)// 也可以通过 Icon 组件的 register 方法批量注册
Icon.register({'my-code': CodeIcon,// 可添加更多自定义图标
})

使用时：

<el-icon><CodeIcon /></el-icon>
<!-- 或使用注册的名称 -->
<el-icon><my-code /></el-icon>

3. 封装自定义图标组件

对于频繁使用的业务图标，可以封装为独立组件，保持代码复用性：

<!-- components/CustomIcons.vue -->
<template><svg :width="size" :height="size" :viewBox="viewBox" fill="currentColor"><slot /></svg>
</template><script setup>
defineProps({size: {type: String,default: '1em'},viewBox: {type: String,default: '0 0 1024 1024'}
})
</script>

使用时传入具体路径：

<el-icon><CustomIcons><path d="M480 64C256 64 64 256 64 480s192 416 416 416 416-192 416-416S704 64 480 64z" /></CustomIcons>
</el-icon>

通过以上方式，能够灵活扩展 Element Plus 的图标体系，满足不同场景下的图标需求。其中，使用 Iconfont 或 Font Awesome 是最便捷的方案，而自定义 SVG 图标则更适合需要高度个性化图标的场景。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.pswp.cn/pingmian/89263.shtml
繁体地址，请注明出处：http://hk.pswp.cn/pingmian/89263.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

黄仁勋链博会首秀：中国开源AI催化全球革命，机器人浪潮重塑未来工厂

黄仁勋链博会首秀：中国开源AI催化全球革命，机器人浪潮重塑未来工厂

7月16日&#xff0c;北京链博会开幕式迎来一位特殊演讲者——英伟达创始人黄仁勋身着唐装&#xff0c;首次以中文登台演讲。这位AI芯片巨头的掌舵人坦言“很紧张”&#xff0c;却清晰传递出一个重要观点&#xff1a;中国的开源AI已成为世界进步的催化剂&#xff0c;让每个国家、…
阅读更多...
uniapp云托管前端网页

uniapp云托管前端网页

uniCloud控制台 实名认证
阅读更多...
27、鸿蒙Harmony Next开发：ArkTS并发（Promise和async/await和多线程并发TaskPool和Worker的使用）

27、鸿蒙Harmony Next开发：ArkTS并发（Promise和async/await和多线程并发TaskPool和Worker的使用）

目录 异步并发 (Promise和async/await) Promise async/await 多线程并发 多线程并发模型 内存共享模型 Actor模型 TaskPool TaskPool运作机制 TaskPool注意事项 Concurrent装饰器 装饰器说明 装饰器使用示例 TaskPool扩缩容机制 扩容机制 缩容机制 Worker Wo…
阅读更多...
Web前端：JavaScript鼠标事件

Web前端：JavaScript鼠标事件

1. onclick&#xff08;鼠标单击事件&#xff09;触发条件&#xff1a;用户用鼠标左键单击元素时触发使用场景&#xff1a;按钮操作、菜单展开/关闭、提交表单等示例代码&#xff1a;<button id"myButton">点击我</button> <script>document.getEl…
阅读更多...
控制台输出的JAVA格斗小游戏-面向对象

控制台输出的JAVA格斗小游戏-面向对象

重温了黑马的这个小程序首先介绍一下&#xff1a;相当于一个小游戏&#xff0c;你打我一下&#xff0c;我打你一下&#xff1b;中间经历一些来回&#xff0c;最终根据血量的大小来判断谁输谁赢&#xff0c;实话讲黑马整个课在这个之前的题目没有什么难度&#xff0c;这个不难&a…
阅读更多...
GitHub 趋势日报 (2025年07月15日)

GitHub 趋势日报 (2025年07月15日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图1641claude-code1054markitdown545system-prompts-and-models-of-ai-tools538claud…
阅读更多...
（5）LangGraph4j框架ReActAgent实现

（5）LangGraph4j框架ReActAgent实现

LangGraph4j框架ReActAgent实现 ReAct-Agent概念 ReAct-Agent 是一种大模型应用中的智能体架构。ReAct 是 Re (Reasoning&#xff0c;推理)和 Act&#xff08;Action&#xff0c;行动&#xff09;两个单词的简写&#xff0c;用通俗的话来说&#xff0c;它可以让大模型像人一样“…
阅读更多...
近期学习小结

近期学习小结

一、TLS&#xff08;Transport Layer Security&#xff09;握手是建立安全通信通道的关键过程&#xff0c;确保客户端与服务器之间的通信加密和身份验证。以下是TLS 1.2和TLS 1.3的握手流程详解及对比&#xff1a;TLS 1.2 握手流程目标&#xff1a;协商加密套件、交换密钥、验证…
阅读更多...
maven本地仓库清缓存py脚本

maven本地仓库清缓存py脚本

清_remote.repositories、以及 .lastUpdated 缓存文件&#xff0c;避免换仓库or私服的时候一直往旧地方去download从而引起的failtodownlown问题 import os import sysdef delete_maven_metadata_files(directory):"""递归删除指定目录下的 _remote.repositorie…
阅读更多...
职坐标：物联网解决方案实战指南

职坐标：物联网解决方案实战指南

随着物联网技术的快速发展&#xff0c;其在智能家居、工业制造和农业领域的应用日益广泛&#xff0c;为解决实际挑战提供了高效方案。本文将围绕职坐标一站式IT培训就业服务平台推出的实战指南&#xff0c;系统解析物联网解决方案的核心内容。指南首先概述物联网解决方案的基本…
阅读更多...
多云环境下的统一安全架构设计

多云环境下的统一安全架构设计

关键词&#xff1a;多云安全、统一架构、零信任、深度防御、身份管理、威胁检测、SIEM、合规性 &#x1f4da; 文章目录 引言&#xff1a;多云时代的安全挑战多云环境面临的安全挑战统一安全架构设计原则核心安全组件架构多层防护体系设计统一身份管理与访问控制安全监控与威…
阅读更多...
批量制作Word：如何根据表格数据的内容批量制作word，根据Excel的数据批量制作word文档的步骤和注意事项

批量制作Word：如何根据表格数据的内容批量制作word，根据Excel的数据批量制作word文档的步骤和注意事项

企业批量制作员工劳动合同时&#xff0c;用 Excel 整理员工姓名、职位等信息&#xff0c;模板设对应占位符&#xff0c;系统快速填充生成合同&#xff1b;高校生成成绩单&#xff0c;Excel 存学生成绩数据&#xff0c;模板嵌入科目占位符&#xff0c;批量生成准确成绩单&#x…
阅读更多...
STM32f103ZET6之ESP8266模块

STM32f103ZET6之ESP8266模块

一、ESP8265概述 官方网址&#xff1a;ESP8266 Wi-Fi MCU I 乐鑫科技 (espressif.com.cn) ESP8266模块---wifi模块 产品特点&#xff1a;ESP8266 是什么&#xff1f; ESP8266 是由乐鑫科技&#xff08;Espressif Systems&#xff09;开发的一款低成本、高性能的 Wi-Fi 微控制器…
阅读更多...
前端设计模式应用精析

前端设计模式应用精析

引言 设计模式是前端工程化架构的基石&#xff0c;通过抽象核心场景解法提升代码复用性与系统可维护性。本文精析 7 个核心模式&#xff0c;结合原生 JavaScript 与框架实践&#xff0c;揭示模式在现代前端架构中的底层映射与应用。1. 观察者模式&#xff08;Observer&#xff…
阅读更多...
【机器学习深度学习】Ollama vs vLLM vs LMDeploy：三大本地部署框架深度对比解析

【机器学习深度学习】Ollama vs vLLM vs LMDeploy：三大本地部署框架深度对比解析

目录 前言 一、为什么要本地部署大语言模型&#xff1f; 二、三大主流部署方案简介 三、核心对比维度详解 1️⃣ 易用性对比 2️⃣ 性能与并发能力 3️⃣ 模型支持与生态兼容性 4️⃣ 部署环境与平台支持 四、一览对比表 五、详细介绍与比较 ✅ 1. Ollama ✅ 2. vL…
阅读更多...
AWS ML Specialist 考试备考指南

AWS ML Specialist 考试备考指南

以下是针对AWS机器学习专家认证（AWS Certified Machine Learning - Specialty）的备考指南精简版，涵盖核心要点和高效备考策略： ‌一、考试核心要点‌ ‌四大核心领域‌： ‌数据准备（28%）‌：S3数据存储、Glue ETL、Feature Store、数据清洗与特征工程。 ‌模型开发（26%…
阅读更多...
yolo8+ASR+NLP+TTS（视觉语音助手）

yolo8+ASR+NLP+TTS（视觉语音助手）

&#x1f9e9; 模块总览&#xff1a;步骤模块作用①麦克风录音&#xff08;VAD支持&#xff09;获取语音并判断是否有人说话②Whisper语音识别把语音内容识别为文字③DeepSeek 聊天接口发送用户提问并获取 AI 回复④edge-tts 朗读回答把 DeepSeek 回答读出来⑤整合成语音助手主…
阅读更多...
Zabbix 分布式监控系统架构设计与优化

Zabbix 分布式监控系统架构设计与优化

一、概念 1.核心概念 Zabbix是一个CS(服务端/客户端)架构的服务Zabbix-Agent获取数据-->发送给-->Zabbix-Server服务端--- >数据会被存放在数据库 <--- Zabbix Web 页面展示数据 2.部署流程 部署ngxphp环境并测试部署数据库 mariadb 10.5及以上 然后进行配置编…
阅读更多...
QT——文件选择对话框 QFileDialog

QT——文件选择对话框 QFileDialog

QFileDialog概述QFileDialog是Qt框架中提供的文件对话框类&#xff0c;用于让用户选择文件或目录。它提供了标准的文件选择界面&#xff0c;支持文件打开、保存、多选等常见操作。基本使用方式QFileDialog提供了两种使用方式&#xff1a;静态方法&#xff1a;直接调用类方法快速…
阅读更多...
Flask+LayUI开发手记（十一）：选项集合的数据库扩展类

Flask+LayUI开发手记（十一）：选项集合的数据库扩展类

条目较少的选项集合&#xff0c;确实可以在程序中直接定义&#xff08;其实最合适的还是存储在一个分类别的数据库表里&#xff09;&#xff0c;但条目较多的选项集合&#xff0c;或者是复杂的树型结构选项集合&#xff0c;一般都是存储在数据库中的&#xff0c;这样维护起来比…
阅读更多...
最新文章

Copyright @ 2022~2023