Problem description

The product manager said he wanted to put the little icon of the time and date picker on the right side, and replace the icon of the hour clock with the icon of the calendar. So first look at the official document has a slot, no! Okay, so let’s just manipulate the DOM.

Fortunately, the product doesn’t understand technology, otherwise I would be accused of wasting performance by manipulating DOM directly. This little bit of DOM manipulation has a negligible impact on browser performance. Moreover, our company’s server hardware is also great!

The idea is to use CSS to hide the small alarm clock on the left of the date and time picker, then insert a small icon element and adjust the position to the right.

Let’s take a look at the renderings:

rendering

The following code

<template>
  <div>
    <el-date-picker
      ref="datedate"
      v-model="value1"
      type="datetime"
      placeholder="Select date and time"
    >
    </el-date-picker>
  </div>
</template>

<script>
export default {
  name: "CodeVue".data() {
    return {
      value1: ""}; },mounted() {
    /* Create an I tag with the class name el-icon-date, insert it into the date and time selector element and adjust it to the end of the time selector */
    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>// Hide clock icon /deep/.el-date-editor {
  position: relative;
  .el-input__prefix {
    display: none; }}</style>
Copy the code

conclusion

In some cases, you’ll need to manipulate the DOM directly. In these days of fast hardware iteration, manipulating a little DOM is basically not a problem, but you still need to pay attention to optimize performance, try to use the rules provided by vUE to manipulate the virtual DOM, after all, the virtual DOM performance is very good. Vue does not allow direct manipulation of the DOM. It does not forbid manipulation of the DOM.