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

elementPlus+vue3引入icon图标

安装包管理,推荐使用 yarn  npm包有时候会有包冲突,在项目的根目录下执行,在终端下


# Yarn
$ yarn add @element-plus/icons-vue

在main.js或main.ts中进行全局注册,导入所有图标


import * as ElementPlusIconsVue from '@element-plus/icons-vue'const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}

页面上按需引入需要的icon图标


<script>
// 按需引入需要的图标
import { User,Lock } from "@element-plus/icons-vue"//引用图标需要通过setUP进行注册
export default {setup() {return {UserLock}},
}
</script>

template模块中 :prefix-icon="User" 引入需要的图标    :surfix-icon="User" 在输入框末尾

<template><!--   用户名     --><el-form-item label="用户"><el-input :prefix-icon="User" v-model="input" placeholder="请输入用户名"> </el-input></el-form-item><!--   密码     --><el-form-item label="密码"><el-input :prefix-icon="User" v-model="input" type="password" placeholder="请输入密码" show-password></el-input></div></div>
</template>

相关文章:

elementPlus+vue3引入icon图标

安装包管理&#xff0c;推荐使用 yarn npm包有时候会有包冲突&#xff0c;在项目的根目录下执行&#xff0c;在终端下 # Yarn $ yarn add element-plus/icons-vue在main.js或main.ts中进行全局注册&#xff0c;导入所有图标 import * as ElementPlusIconsVue from element-plu…...

Spring框架中的bean管理(XML和注解及属性的注入)

Spring框架中IOC就是将创建对象的权力反转给Spring框架&#xff0c;我们无需自己创建对象&#xff0c;直接在Spring框架的容器中获取即可。 bean中配置的就是需要让Spring管理的类。 XML的bean管理 先写个“HelloWorld”: <bean id"User" class"com.ffyc.…...

MySQL 存储过程提高数据库效率和可维护性

MySQL 存储过程是一种强大的数据库功能&#xff0c;它允许你在数据库中存储和执行一组SQL语句&#xff0c;类似于编程中的函数。存储过程可以大幅提高数据库的性能、安全性和可维护性。本文将详细介绍MySQL存储过程的使用。 什么是MySQL存储过程&#xff1f; MySQL存储过程是一…...

JAXB的XmlElement注解

依赖 如果基于JAX-WS开发&#xff0c;可以在maven工程的pom.xml文件中增加如下依赖&#xff0c;会将依赖的JAXB库也下载下来&#xff1a; <dependency><groupId>jakarta.xml.ws</groupId><artifactId>jakarta.xml.ws-api</artifactId><vers…...

竞赛选题 深度学习驾驶行为状态检测系统(疲劳 抽烟 喝水 玩手机) - opencv python

文章目录 1 前言1 课题背景2 相关技术2.1 Dlib人脸识别库2.2 疲劳检测算法2.3 YOLOV5算法 3 效果展示3.1 眨眼3.2 打哈欠3.3 使用手机检测3.4 抽烟检测3.5 喝水检测 4 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于深度学习的驾…...

59 权限提升-Win溢出漏洞及ATSCPS提权

目录 知识点必备&#xff1a;windows权限认识(用户及用户组)0x01 普通权限0x02特殊权限 演示案例:基于WEB环境下的权限提升-阿里云靶机基于本地环境下的权限提升-系统溢出漏洞基于本地环境下的权限提升-AT&SC&PS命令 案例给到的思路点总结如下:涉及资源: 这个章节会讲到…...

【新闻稿】Solv 与 zCloak 联合开发跨境贸易场景下可编程数字凭证项目,获得新加坡、加纳两国央行支持...

关于昨天 Solv 携手 zCloak 与新加坡和加纳两个央行合作的 Project DESFT&#xff0c;很多朋友都发来恭喜和祝福&#xff0c;并希望了解详情。这个事我们秘密努力了半年多&#xff0c;终于有一个阶段性的成果。这里我转载中文版官宣新闻稿&#xff0c;欢迎大家关注。等我忙过这…...

requests库进行爬虫ip请求时遇到的错误解决方法

问题背景 在使用requests库进行HTTP请求时&#xff0c;用户遇到了一个AuthenticationRequired&#xff08;身份验证必须&#xff09;的错误。然而&#xff0c;当使用urllib.request.urlopen执行相同的操作时&#xff0c;却能够成功。同时&#xff0c;用户提供了自己的系统信息…...

目标检测—YOLO系列(二 ) 全面解读论文与复现代码YOLOv1 PyTorch

精读论文 前言 从这篇开始&#xff0c;我们将进入YOLO的学习。YOLO是目前比较流行的目标检测算法&#xff0c;速度快且结构简单&#xff0c;其他的目标检测算法如RCNN系列&#xff0c;以后有时间的话再介绍。 本文主要介绍的是YOLOV1&#xff0c;这是由以Joseph Redmon为首的…...

Redis维护缓存的方案选择

Redis中间件常常被用作缓存&#xff0c;而当使用了缓存的时候&#xff0c;缓存中数据的维护&#xff0c;往往是需要重点关注的&#xff0c;尤其是重点考虑的是数据一致性问题。以下是维护数据库缓存的一些常用方案。 1、先删除缓存&#xff0c;再更新数据库 导致数据不一致的…...

LeetCode236. Lowest Common Ancestor of a Binary Tree

文章目录 一、题目二、题解 一、题目 Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in the tree. According to the definition of LCA on Wikipedia: “The lowest common ancestor is defined between two nodes p and q as the lowest…...

基于Gin+Gorm框架搭建MVC模式的Go语言企业级后端系统

文/朱季谦 环境准备&#xff1a;安装Gin与Gorm 本文搭建准备环境&#xff1a;GinGormMySql。 Gin是Go语言的一套WEB框架&#xff0c;在学习一种陌生语言的陌生框架&#xff0c;最好的方式&#xff0c;就是用我们熟悉的思维去学。作为一名后端Java开发&#xff0c;在最初入门…...

【开源】基于Vue和SpringBoot的固始鹅块销售系统

项目编号&#xff1a; S 060 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S060&#xff0c;文末获取源码。} 项目编号&#xff1a;S060&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 鹅块类型模块2.3 固…...

Windows11怎样投屏到电视上?

电视屏幕通常比电脑显示器更大&#xff0c;能够提供更逼真的图像和更震撼的音效&#xff0c;因此不少人也喜欢将电脑屏幕投屏到电视上&#xff0c;缓解一下低头看电脑屏幕的烦恼。 Windows11如何将屏幕投射到安卓电视&#xff1f; 你需要在电脑和电视分贝安装AirDroid Cast的电…...

ubuntu中用docker部署jenkins,并和码云实现自动化部署

1.部署jenkins docker network create jenkins docker run --name jenkins-docker --rm --detach \--privileged --network jenkins --network-alias docker \--env DOCKER_TLS_CERTDIR/certs \--volume jenkins-docker-certs:/certs/client \--volume jenkins-data:/var/jen…...

for,while,do-while,死循环,嵌套循环,跳转关键字,随机数

1.for循环 public class ForDemo1 {public static void main(String[] args) {for (int i 0; i < 5; i) {System.out.println("HelloWorld");}System.out.println("--------------------------------------------");for (int i 1; i <10 ; i) {Sy…...

【六袆 - MySQL】SQL优化;Explain SQL执行计划分析;

Explain SQL执行计划分析 概念:English Unit案例分析1.分析的SQL2.执行计划分析 【如图】MySQL执行计划参数以及它们的影响或意义:概念: MySQL执行计划(Execution Plan)是数据库系统根据查询语句生成的一种执行策略,用于指导数据库引擎执行查询操作。 English Unit This…...

【AI视野·今日NLP 自然语言处理论文速览 第六十二期】Wed, 25 Oct 2023

AI视野今日CS.NLP 自然语言处理论文速览 Wed, 25 Oct 2023 (showing first 100 of 112 entries) Totally 100 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Computation and Language Papers MuSR: Testing the Limits of Chain-of-thought with Multistep Soft R…...

各种符号地址,可以直接复制粘贴使用

字符符号 - 文本数字工具 | 偷懒工具 toolight.cn...

C语言测试题:用冒泡法对输入的10个字符由小到大排序 ,要求数组做为函数参数。

编写一个函数&#xff1a; 用冒泡法对输入的10个字符由小到大排序 &#xff0c;要求数组做为函数参数。 冒泡排序是一种简单的排序算法&#xff0c;它会多次遍历要排序的数列&#xff0c; 每次遍历时&#xff0c;依次比较相邻的两个元素&#xff0c;如果它们的顺序不符合要求…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

新能源汽车智慧充电桩管理方案:新能源充电桩散热问题及消防安全监管方案

随着新能源汽车的快速普及&#xff0c;充电桩作为核心配套设施&#xff0c;其安全性与可靠性备受关注。然而&#xff0c;在高温、高负荷运行环境下&#xff0c;充电桩的散热问题与消防安全隐患日益凸显&#xff0c;成为制约行业发展的关键瓶颈。 如何通过智慧化管理手段优化散…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

AspectJ 在 Android 中的完整使用指南

一、环境配置&#xff08;Gradle 7.0 适配&#xff09; 1. 项目级 build.gradle // 注意&#xff1a;沪江插件已停更&#xff0c;推荐官方兼容方案 buildscript {dependencies {classpath org.aspectj:aspectjtools:1.9.9.1 // AspectJ 工具} } 2. 模块级 build.gradle plu…...

Python训练营-Day26-函数专题1:函数定义与参数

题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一个名为 calculate_circle_area 的函数&#xff0c;该函数接收圆的半径 radius 作为参数&#xff0c;并返回圆的面积。圆的面积 π * radius (可以使用 math.pi 作为 π 的值)要求&#xff1a;函数接收一个位置参数 radi…...

在 Visual Studio Code 中使用驭码 CodeRider 提升开发效率:以冒泡排序为例

目录 前言1 插件安装与配置1.1 安装驭码 CodeRider1.2 初始配置建议 2 示例代码&#xff1a;冒泡排序3 驭码 CodeRider 功能详解3.1 功能概览3.2 代码解释功能3.3 自动注释生成3.4 逻辑修改功能3.5 单元测试自动生成3.6 代码优化建议 4 驭码的实际应用建议5 常见问题与解决建议…...

WebRTC调研

WebRTC是什么&#xff0c;为什么&#xff0c;如何使用 WebRTC有什么优势 WebRTC Architecture Amazon KVS WebRTC 其它厂商WebRTC 海康门禁WebRTC 海康门禁其他界面整理 威视通WebRTC 局域网 Google浏览器 Microsoft Edge 公网 RTSP RTMP NVR ONVIF SIP SRT WebRTC协…...

用递归算法解锁「子集」问题 —— LeetCode 78题解析

文章目录 一、题目介绍二、递归思路详解&#xff1a;从决策树开始理解三、解法一&#xff1a;二叉决策树 DFS四、解法二&#xff1a;组合式回溯写法&#xff08;推荐&#xff09;五、解法对比 递归算法是编程中一种非常强大且常见的思想&#xff0c;它能够优雅地解决很多复杂的…...

react菜单,动态绑定点击事件,菜单分离出去单独的js文件,Ant框架

1、菜单文件treeTop.js // 顶部菜单 import { AppstoreOutlined, SettingOutlined } from ant-design/icons; // 定义菜单项数据 const treeTop [{label: Docker管理,key: 1,icon: <AppstoreOutlined />,url:"/docker/index"},{label: 权限管理,key: 2,icon:…...