elementUI时间日期选择器更改小图标的位置和icon

问题描述

产品经理说,想要把时间日期选择器的的小图标放在右侧,并且不要小时钟的图标,换成日历的图标。于是乎先看一下官方文档有没有插槽,没有!好吧,那就直接操作DOM吧。

幸亏产品不懂技术,要不然会说我直接操作DOM浪费性能呢!其实操作这一点点DOM对浏览器性能的影响是可以忽略的。再者,咱公司的服务器硬件也是杠杠的!

思路就是先通过css将时间日期选择器左侧的小闹钟隐藏起来,然后再插入一个小图标元素并调整位置到右侧即可。

我们先看一下效果图:

效果图

elementUI时间日期选择器更改小图标的位置和icon_第1张图片

代码如下




总结

在有些情况下,还是需要我们去直接操作dom的。在硬件快速迭代的现在,操作一点点dom基本上问题不大,但是还是要注意去优化性能,尽量使用vue提供的规则去操作虚拟dom,毕竟虚拟dom的性能还是很好的。所以vue官方强调的是尽量不要直接操作dom,并没有说严禁操作dom,想想以前的jQuery,细品一下,仿佛明白了什么...

你可能感兴趣的:(element-ui)