南昌网站制作代理商,wordpress 前端构建,安溪住房和城乡建设网站,自适应微网站开发安装
注意 ElementPlus 的 Icon 图标 要额外安装插件 element-plus/icons-vue.
npm install element-plus/icons-vue注册
全局注册
定义一个文件 element-icon.js #xff0c;注意代码第 6 行。加上了前缀 ElIcon #xff0c;避免组件命名重复#xff0c;且易于理解为 e…安装
注意 ElementPlus 的 Icon 图标 要额外安装插件 element-plus/icons-vue.
npm install element-plus/icons-vue注册
全局注册
定义一个文件 element-icon.js 注意代码第 6 行。加上了前缀 ElIcon 避免组件命名重复且易于理解为 element-plus 的 icon。
import * as ElementPlusIconsVue from element-plus/icons-vueexport const registerElIcon (app) {// 全局注册图标 ElIconXxxxfor (let i in ElementPlusIconsVue) {let name ElIcon${i};app.component(name, ElementPlusIconsVue[i])}
}main.js 中引入
import { registerElIcon } from ./elements-icon.js// 全局注册 el-icon
registerElIcon(app);局部注册
在组件内局部注册这里使用 script setup。
script setup
import {Postcard as ElIconPostcard,Calendar as ElIconCalendar,
} from element-plus/icons-vue
/script使用
全局或局部注册的使用方式是一样的。使用方式也有两种且注意接下来的使用都是加了前缀 el-icon-xxx 或 ElIconXxxx。
方式一结合 el-icon 使用
使用 el-icon 为 SVG 图标提供属性
!-- 小驼峰方式 --
el-icon :sizesize :colorcolorel-icon-edit /
/el-icon!-- 大驼峰方式 --
el-icon :sizesize :colorcolorElIconEdit /
/el-icon方式二直接使用 SVG 图标
!-- 小驼峰方式 --
el-icon-edit /!-- 大驼峰方式 --
ElIconEdit /与 ElementUI 的区别
el-button
element-ui el-button 中的 icon 使用属性 icon 是图标类名类型是 stringelement-plus el-button 中的 icon 使用属性 icon 图标组件类型是 string /Component
element-ui
方式 1class“el-icon-xxx” 类名
如图蓝色框是图标文字标签 span 包裹图标标签 i classel-icon-xxx。
el-button sizemini typetext i classel-icon-folder-add/i新建1
/el-button方式 2el-button icon 属性
如图蓝色框是图标文字标签 span 与图标标签 i classel-icon-xxx同级。
el-button sizemini typetext iconel-icon-folder-add新建2
/el-buttonelement-plus
以下 icon 组件都是加了前缀 ElIconXxxx 和 el-icon-xxx
1. icon 组件方式 无论 icon 是全局或局部注册在 el-button 中的使用方式都是一样的。 方式 1直接使用 SVG 图标
如图蓝色框是图标直接渲染 svg 标签。
!-- 方式1直接使用 SVG 图 --
el-button sizesmall typeprimary link ElIconFolderAdd/新建1
/el-button方式 2结合 el-icon 使用
如图蓝色框是图标且被标签 i classel-icon 包裹一层。
!-- 方式2结合 el-icon 使用 --
el-button sizesmall typeprimary link el-iconElIconFolderAdd//el-icon新建2
/el-button2.el-button icon 属性方式 此处有坑 icon 的全局和局部组件注册在 el-button 中使用 icon 属性有差异 方式 1el-button 属性 icon 为 Component 类型
局部注册有效全局注册无效
使用 el-button 属性 icon局部注册在可以找到属性 icon 的组件对象全局注册无法找到icon 的组件对象所以渲染失败html 把文字标签 span 与标签 i classel-icon 渲染为同级
!-- 局部注册注意 icon 前有 : --
el-button sizesmall typeprimary link :iconElIconFolderAdd新建3
/el-button方式 2el-button 属性 icon 为 string 类型
全局注册有效局部注册无效
使用 el-button 属性 icon且没有 :全局注册识别为全局注册的组件名称局部注册找不到组件名称所以渲染失败**小技巧**代码第 6 行也可写成小驼峰。这样就和 ElementUI 方式2 一致了 html 把文字标签 span 与标签 i classel-icon 渲染为同级
此方式无效。注意 icon 前没有 : 传入是 string 类型组件无法被识别。
!-- 全局注册注意 icon 前没有 : --
el-button sizesmall typeprimary link iconElIconFolderAdd新建4
/el-button
!-- 全局注册注意 icon 前没有 : --
el-button sizesmall typeprimary link iconel-icon-folder-add新建5
/el-buttonel-input element-ui el-input 中的 icon 使用属性前缀 prefix-icon 或后缀 suffix-icon 是图标类名类型是 string element-plus el-input 中的 icon 使用属性前缀 prefix-icon 或后缀 suffix-icon 是图标类名图标组件类型是 string /Component
element-ui
有两种方式
属性方式使用前缀 prefix-icon 和后缀 suffix-icon slot 方式使用前缀 prefix 和后缀 suffix
!-- 属性方式 --
el-input placeholder请输入内容 prefix-iconel-icon-search v-modelinputVal/el-input !-- slot 方式 --
el-input placeholder请输入内容 v-modelinputVali slotprefix classel-input__icon el-icon-search/i
/el-inputelement-plus
这里不再赘述 icon 组件的全局注册和局部注册的差异。与 el-button 同理。
同样有两种方式。
属性方式使用前缀 prefix-icon 和后缀 suffix-icon slot 方式使用前缀 #prefix 和后缀 #suffix
!-- 属性方式且局部注册类型为 Component有 : --
el-input placeholder请输入内容 :prefix-iconElIconSearch v-modelinputVal /!-- 属性方式全局部注册类型为 string。没有 : --
el-input placeholder请输入内容 prefix-iconElIconSearch v-modelinputVal /!-- 属性方式全局部注册类型为 string。没有 : 小驼峰 --
el-input placeholder请输入内容 prefix-iconel-icon-search v-modelinputVal /!-- slot 方式 --
el-input placeholder请输入内容 v-modelinputValtemplate #prefixel-icon classel-input__iconElIconSearch//el-icon/template
/el-inputel-dropdown
这里不再赘述 icon 组件的全局注册和局部注册的差异。与 el-button 同理。 element-ui el-dropdown 中的 icon 使用 element-plus el-dropdown 中的 icon 使用
element-ui
使用属性 icon 方式。
el-dropdown-menuel-dropdown-item commandabout iconel-icon-setting关于/el-dropdown-itemel-dropdown-item commandtheme iconel-icon-data-analysis主题/el-dropdown-itemel-dropdown-item commandlogout iconel-icon-switch-button注销/el-dropdown-item
/el-dropdown-menuelement-plus
使用属性 icon 方式。
el-dropdown-menu!-- 属性方式且局部注册类型为 Component有 : --el-dropdown-item commandadmin :iconElIconSetting后台管理/el-dropdown-item!-- 属性方式全局部注册类型为 string。没有 : --el-dropdown-item commandtheme iconElIconDataAnalysis切换主题/el-dropdown-item!-- 属性方式全局部注册类型为 string。没有 : 小驼峰 --el-dropdown-item commandlogout :conel-icon-switch-button注销/el-dropdown-item
/el-dropdown-menu
