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

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.dtcms.com/a/284203.html

相关文章:

  • 【JAVA新特性】Java 8 新特性实战
  • 网络安全威胁下的企业困境与破局技术实践
  • string + 栈 bitset 可达性统计(拓扑排序)
  • 浅探C语言的回调函数(Callback Function)
  • CD54.【C++ Dev】vector和list的反向迭代器的实现
  • 大语言模型Gemini Deep Research 全流程解读+使用攻略
  • uniapp云打包安卓
  • ADVB时序图
  • Spring Boot基于AOP的本地/远程调用动态路由实践
  • 如何在银河麒麟桌面系统中启用 sudo 密码的星号反馈
  • QT之openGL使用(一)
  • 燕之屋打造多元化产品组合,引领行业迈向高质量发展新里程
  • 心通达OA知识管理平台:高效解决单位知识管理难题
  • 点晴模切ERP帮忙模切行业向数智化管理转型
  • Rocky Linux 9 源码包安装php7
  • 如何通过mac的前24bit,模糊确认是那一台什么样的设备
  • macOS 字体管理全攻略:如何查看已安装字体及常见字体格式区
  • 从基础到实战:.NET 反射机制的进阶用法与最佳实践
  • Tekla多部门协作,授权资源如何共享与调度?
  • 暑期算法训练.3
  • day29:零基础学嵌入式之线程1.0
  • HTML 极简个人介绍卡片(侧重语义化标签和响应式布局)
  • pytorch小记(三十二):深度解析 PyTorch 的 `torch.remainder`:向下取整余数运算
  • 【web安全】DVWA存储型XSS分析与利用
  • 第6天| openGauss中用户一次只能连接到一个数据库,没法访问其他数据库的对象
  • arping(ARP协议网络测试工具)
  • 【实时Linux实战系列】实时系统的安全性架构
  • MySQL如何解决事务并发的幻读问题
  • 从单线程到云原生:Redis 二十年演进全景与内在机理深剖
  • RuoYi-Cloud 定制微服务