elementPlus 图标不显示 属性模式不显示

问题:

elementPlus 属性模式图标不显示

 <el-input placeholder="请输入用户名" :suffix-icon="Avatar">  //这个图标不显示

之前在main.ts里全局引入了icons-vue。这里的script里也没引入。

解决:

在当前的script中重新引入avatar就可以显示了。

<script setup>
import {Avatar} from "@element-plus/icons-vue";  //这里再引入才能用 属性模式
</script>

总结:

可能在属性模式下,图标(Avatar)是一个变量。不引入的话就无法识别吧。

如果全局引入所有图标的话,还是用插槽模式吧。

//全局引入elementIcons使用插槽模式,无需单独引入图标
<template #prefix><el-icon><Lock /></el-icon>  
</template>

备注:

Input 输入框 | Element Plus

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

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

相关文章

【蓝桥杯】C语言常见高级算法

&#x1f338;个人主页&#xff1a;Yang-ai-cao &#x1f4d5;系列专栏&#xff1a;蓝桥杯 C语言 &#x1f34d;博学而日参省乎己&#xff0c;知明而行无过矣 目录 &#x1f338;个人主页&#xff1a;Yang-ai-cao &#x1f4d5;系列专栏&#xff1a;蓝桥杯 C语言 &a…

【学习笔记】Kali

纯个人总结&#xff0c;有什么不对的地方欢迎指正。 笔记根据个人学习进度持续更新… 一、 认识Kali 基础了解 Kali是一套基于Debian发行版的一款操作系统。&#xff08;这里讲一个误区&#xff0c;我以前一直以为kali就属于deepin下的操作系统&#xff0c;但是我知道deepin是…

【DPDK学习路径】四、输出hello world!

在 ./examples/ 目录下可以找到许多的示例程序&#xff0c;将其中的 l3fwd-vf/Makefile 拷贝到自己的工作目录下&#xff0c;新建一个 main.c 文件&#xff0c;编写其内容如下&#xff1a; #include<stdio.h>int main() {printf("hello world!\n");return 0; …

HTML静态网页成品作业(HTML+CSS+JS)—— 美食企业曹氏鸭脖介绍网页(4个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;使用Javacsript代码实现 图片轮播切换&#xff0c;共有4个页面。 二、…

css3新增的伪类有哪些

CSS3 引入了许多新的伪类选择器&#xff0c;这些选择器为开发者提供了更多的样式控制选项。以下是一些 CSS3 中新增的主要伪类选择器&#xff1a; 结构性伪类&#xff1a; :root&#xff1a;选择文档的根元素&#xff08;通常是 <html>&#xff09;。:empty&#xff1a;…

使用pyqt对yolov5进行简答部署

YOLOv5是一种高效的实时目标检测算法&#xff0c;广泛应用于各类计算机视觉任务中。为了实现便捷的图形用户界面&#xff08;GUI&#xff09;&#xff0c;我们采用了PyQt框架。PyQt是一个Python绑定的Qt库&#xff0c;用于创建跨平台的应用程序。 在本研究中&#xff0c;我们首…

「React」RSC 服务端组件

前言 RSC&#xff08;React Server Components&#xff09;是React框架的一个新特性&#xff0c;它允许开发者编写只在服务器端渲染的组件。与传统的服务器端渲染&#xff08;SSR&#xff09;不同&#xff0c;RSC的目标是提升性能和用户体验&#xff0c;同时减少客户端加载的J…

【每日一练】day3

✨✨谢谢大家捧场&#xff0c;祝屏幕前的小伙伴们每天都有好运相伴左右&#xff0c;一定要天天开心哦&#xff01;✨✨ &#x1f388;&#x1f388;作者主页&#xff1a; &#x1f388;丠丠64-CSDN博客&#x1f388; ✨✨ 帅哥美女们&#xff0c;我们共同加油&#xff01;一起…

OLED柔性屏的显示效果如何

OLED柔性屏的显示效果非常出色&#xff0c;具有多方面的优势。以下是关于OLED柔性屏显示效果的详细分析&#xff1a; 色彩表现&#xff1a;OLED柔性屏的每个像素都可以独立发光&#xff0c;因此色彩准确性极高。黑色呈现得非常深邃&#xff0c;而亮部则展现出鲜明而生动的细节。…

vue3+electron搭建桌面软件

vue3electron开发桌面软件 最近有个小项目, 客户希望像打开 网易云音乐 那么简单的运行起来系统. 前端用 Vue 会比较快一些, 因此决定使用 electron 结合 Vue3 的方式来完成该项目. 然而, 在实施过程中发现没有完整的博客能够记录从创建到打包的流程, 摸索一番之后, 随即梳理…

事件、方法实现 on_radioGreen_clicked ,on_chkBoxUnder_clicked,Qfont,QPalette

Vertical Layout 、Horizontal Layout 实验窗体自适应布局 接上篇界面布局&#xff0c; 实验checkBox、radioBox 的事件槽&#xff0c; 使用Qfont组件变更纯文本框QPlainTextEdit中字体的下划线、加粗、斜体效果 使用调色板组QPalette变更纯文本框QPlainTextEdit中文本颜色 UI…

VsCode中C文件调用其他C文件函数失败

之前一直使用CodeBlocks&#xff0c;最近使用vscode多&#xff0c;感觉它比较方便&#xff0c;但在调用其他C文件的时候发现报错以下内容基于单C文件运行成功&#xff0c;否则请移步 博文&#xff1a;VSCode上搭建C/C开发环境 报错信息 没有使用CodeRunner插件&#xff0c;弹…

❤追本溯源篇-林太白

❤追本溯源篇-林太白 总结当前博客下所有的技术和相关文章 (点赞收藏不断更新) 工具使用 ❤ Chrome浏览器使用 设置Chrome浏览器 http://t.csdnimg.cn/P68jK

DDei在线设计器-配置主题风格

DDeiCore-主题 DDei-Core插件提供了默认主题和黑色主题。 如需了解详细的API教程以及参数说明&#xff0c;请参考DDei文档 默认主题 黑色主题 使用指南 引入 import { DDeiCoreThemeBlack } from "ddei-editor";使用并修改设置 extensions: [......//通过配置&am…

Java对指定不规则的jsonString读取并操作

当我们在做项目的时候有时候会对接第三方的接口&#xff0c;假如对方返回的结果是一个不规则的json字符串&#xff0c;这个时候我们就需要对于返回结果一条一条的进行读取并操作&#xff1a; 一、json例子&#xff1a;不是数组&#xff0c;单纯的只是一行一行的数据 {"n…

Web前端右侧悬浮:实现技巧与深度解析

Web前端右侧悬浮&#xff1a;实现技巧与深度解析 在Web前端开发中&#xff0c;右侧悬浮功能作为一种常见的交互设计元素&#xff0c;能够为用户提供便捷的操作入口&#xff0c;提升用户体验。然而&#xff0c;实现这一功能却并非易事&#xff0c;需要开发者掌握一定的技巧和方…

机器学习在医学领域中的应用|文献精析·24-06-13

小罗碎碎念 2024-06-13&#xff5c;文献精析&#xff1a;机器学习在医学领域中的应用 为了系统性地和大家梳理一下机器学习在医学领域中的应用&#xff0c;我特意去找了一篇文献&#xff0c;把其中有价值的信息筛选出来了。但是我没选的内容不代表不重要&#xff0c;感兴趣的可…

一文讲清:bom管理系统是什么?在生产管理中有什么作用?

在制造业中&#xff0c;物料清单&#xff08;Bill of Materials&#xff0c;简称BOM&#xff09;扮演着至关重要的角色。物料清单&#xff08;BOM&#xff09;是制造或维修产品所需的材料、组件和零件的结构化综合列表&#xff0c;以及所需材料的数量、名称、描述和成本。简而言…

解释 RESTful API, 如何使用它构建 web 应用程序

RESTful API&#xff08;Representational State Transfer&#xff09;是一种设计风格和架构原则&#xff0c;用于构建可扩展和可维护的网络应用程序。它基于 HTTP 协议&#xff0c;并使用标准的 HTTP 方法&#xff08;GET、POST、PUT、DELETE&#xff09;来执行对资源的操作。…

Web前端项目实例描述:构建交互式在线书店

Web前端项目实例描述&#xff1a;构建交互式在线书店 在数字化时代&#xff0c;Web前端技术发挥着至关重要的作用&#xff0c;它为用户提供了直观、友好的界面体验。本次&#xff0c;我将为大家详细描述一个Web前端项目实例——构建交互式在线书店。该项目涵盖了多个关键方面&…