elementUI时间日期选择器更改小图标的位置和icon
问题描述
产品经理说，想要把时间日期选择器的的小图标放在右侧，并且不要小时钟的图标，换成日历的图标。于是乎先看一下官方文档有没有插槽，没有！好吧，那就直接操作DOM吧。
幸亏产品不懂技术，要不然会说我直接操作DOM浪费性能呢！其实操作这一点点DOM对浏览器性能的影响是可以忽略的。再者，咱公司的服务器硬件也是杠杠的！
思路就是先通过css将时间日期选择器左侧的小闹钟隐藏起来，然后再插入一个小图标元素并调整位置到右侧即可。
我们先看一下效果图：
效果图
代码如下
<template> <div> <el-date-picker ref="datedate" v-model="value1" type="datetime" placeholder="选择日期时间" > </el-date-picker> </div> </template> <script> export default { name: "CodeVue", data() { return { value1: "", }; }, mounted() { /* 思路：通过document文档，选中日期时间选择器元素，然后创建一个i标签， 并指定其类名为el-icon-date，并将其插入到日期时间选择器元素中 然后通过样式的控制调整其到时间选择器尾部的位置 */ let keyNode = document.querySelector(".el-date-editor"); let iNode = document.createElement("i"); iNode.setAttribute("class", "el-icon-date"); // el-icon-bottom keyNode.appendChild(iNode); iNode.style.position = "absolute"; iNode.style.top = "13px"; iNode.style.right = "32px"; }, }; </script> <style lang="less" scoped> // 隐藏小时钟图标 /deep/ .el-date-editor { position: relative; .el-input__prefix { display: none; } } </style> 复制代码总结
在有些情况下，还是需要我们去直接操作dom的。在硬件快速迭代的现在，操作一点点dom基本上问题不大，但是还是要注意去优化性能，尽量使用vue提供的规则去操作虚拟dom，毕竟虚拟dom的性能还是很好的。所以vue官方强调的是尽量不要直接操作dom，并没有说严禁操作dom，想想以前的jQuery，细品一下，仿佛明白了什么...
作者：水冗水孚
链接：https://juejin.cn/post/7021324324325851149