首页 前端知识 关于修改element UI DatePicker日期选择器样式自定义图标

关于修改element UI DatePicker日期选择器样式自定义图标

2024-04-07 08:04:05 前端知识 前端哥 128 404 我要收藏

首先说下场景
element UI的日期选择器图标是在左边 是这样的
在这里插入图片描述
而产品想要的效果是这样的
在这里插入图片描述
并且里面有值时鼠标移上去要显示x号
比如这样
在这里插入图片描述
那么我们就开始了
首先你们UI有吧? 想要换的图标有吧? 阿里巴巴矢量图知道吧?
引进来
我需要的是这个icon-icon_rili图标
在这里插入图片描述
然后到你用到el-date-picker组件的地方去

因为我们一进来就要将图标换掉
所以
在这里插入图片描述
document.querySelectorAll(“.el-date-editor”)找到el-date-picker
手动添加class元素 icon-icon_rili
top和right可以自己调
当然我们要先将左边的图标元素隐藏掉
我这边是这样处理的
在这里插入图片描述
这样进来后图标就会展示了
但我们鼠标移上去就会与close图标重叠
所以我们要加两个事件 使得鼠标移上去后只显示清空图标
找到el-date-picker
在这里插入图片描述
添加这两个事件
在这里插入图片描述

至此需求完成
但仍会有一个问题
每次返回再进来时会重复添加导致图标重叠
所以在销毁组件时remove一下
在这里插入图片描述
好了 问题解决 bye

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4538.html
标签
评论
发布的文章

java解析超大json文件数据

2024-04-19 21:04:10

头歌-JavaScript基础

2024-04-19 21:04:54

C#Json序列化及反序列化

2024-04-19 21:04:40

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!