然后在这个侧边栏中使用的时候就遇到了下面的这个bug,很奇怪,要是说我svg组件封装的有问题,为什么有些svg图标可以展示,但是折叠之后就不可以,于是我刚开始将自己的svg图标全部替换成了element-plus官网的el-icon,发现替换之后确实是没有问题,可以正常的展示,但是那样以来自己封装的svg组件就成徒劳了,于是就开始上网查...
然后在这个侧边栏中使用的时候就遇到了下面的这个bug,很奇怪,要是说我svg组件封装的有问题,为什么有些svg图标可以展示,但是折叠之后就不可以,于是我刚开始将自己的svg图标全部替换成了element-plus官网的el-icon,发现替换之后确实是没有问题,可以正常的展示,但是那样以来自己封装的svg组件就成徒劳了,于是就开始上网查...
运行dev,检查svg图标文件在浏览器中显示正确: pnpm dev 在自己的vue3项目中使用@langhua/el-icon-ext: 把/packages/vue/dist复制到自己项目中,比如/src/assets/@langhua/el-icon-ext 把@langhua/el-icon-ext配置到package.json中: ... "dependencies": { ... "@langhua/el-icon-ext": "link:./...
.el-tree-node__expand-icon.expanded{-webkit-transform:rotate(0deg);transform:rotate(0deg);}.el-icon-caret-right:before{font-size:12px;// 对svg图片编码即可展示content:url(encodeURI('@/assets/add-icon.svg'))}.el-tree-node__expand-icon.expanded.el-icon-caret-right:before{content:url(同上...
请注意,由于Element UI主要使用自己的图标库,因此直接通过 icon 属性使用非Element UI图标库中的图标可能需要额外的配置或不支持。在这种情况下,使用 <i> 标签或内联SVG可能是更好的选择。
我习惯了Element UI的用法,但又喜欢用Vue3,所以就在Element Plus的基础上二次封装了一个语法有点像Element UI里icon的组件出来。 虽然在我日常的Vue3项目中不会用本文所讲的这个组件,但我还是要搞出来。因为我真的好闲。 设计 要实现的功能 通过type属性使用指定的svg图标。
transform: rotateZ(0deg);//转动图片 appearance: none; background-size: 8px 8px; width: 14px; height: 14px; position: absolute;//图片定位 top:5px; right: 0px; } .el-icon svg{//隐藏原来箭头 display:none } } 可正常使用~
使用的框架和组件: vue2 elment 效果示例图: 文件中引入自己封装的组件 <IconSelect v-model="form.icon" /> 封装的组件: IconSelect // icon 选择框 <template> <svg :class="{'is-active':isActive}" class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width=...
HwmUICustomImageScene 自定义图标场景。 imagePath char[] 自定义图标路径,使用绝对路径。如“to/path/image.svg”,支持svg/png等格式。 注:需要UTF8编码。 width unsigned int 自定义图标宽度。 height unsigned 来自:帮助中心 查看更多 → 自定义指定场景图标 ...
-- css隐藏+背景图 --><el-treeclass="myTree3"style="max-width: 600px":data="data":props="defaultProps"/>:deep(.myTree3){.el-tree-node__expand-iconsvg{display:none;}.el-tree-node__expand-icon{background-image:url("./arrow.png");background-size:50%;background-repeat:no-repeat;...