问题形容

产品经理说，想要把工夫日期选择器的的小图标放在右侧，并且不要小时钟的图标，换成日历的图标。于是乎先看一下官网文档有没有插槽，没有！好吧，那就间接操作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，细品一下，好像明确了什么...