Element Plus中更改DateTimePicker 日期时间选择器的默认图标和位置

lemonDing
320 阅读2分钟

前言

下面以一个小案例来复习下网格布局

<template>
  <div class="app">
    <!-- DateTimePicker 日期时间选择器 -->
    <div class="container">
      <div class="box1" style="background-color: saddlebrown;">
        <span>Default</span>
        <el-date-picker v-model="formData.value1" type="date" placeholder="Select date" />
      </div>
      <div class="box2" style="background-color: red;">
        <span>height:300px</span>
        <el-date-picker v-model="formData.value2" type="date" placeholder="Select date" />
      </div>
      <div class="box3" style="background-color: green;">
        <span>height:300px</span>
        <el-date-picker v-model="formData.value3" type="date" placeholder="Select date" />
      </div>
      <div class="box4" style="background-color: yellow;">
        <span>height:300px</span>
        <el-date-picker v-model="formData.value4" type="date" placeholder="Select date" />
      </div>
      <div class="box5" style="background-color: skyblue;">
        <span>Default</span>
        <el-date-picker v-model="formData.value5" type="date" placeholder="Select date" />
      </div>
      <div class="box6" style="background-color: purple;">
        <span>Default</span>
        <el-date-picker v-model="formData.value6" type="date" placeholder="Select date" />
      </div>
      <div class="box7" style="background-color: orange;">
        <span>Default</span>
        <el-date-picker v-model="formData.value7" type="date" placeholder="Select date" />
      </div>
      <div class="box8" style="background-color: orchid;">
        <span>Default</span>
        <el-date-picker v-model="formData.value8" type="date" placeholder="Select date" />
      </div>
      <div class="box9" style="background-color: #ccc;">
        <span>Default</span>
        <el-date-picker v-model="formData.value9" type="date" placeholder="Select date" />
      </div>
      <div class="box10" style="background-color: white;">
        <span>Default</span>
        <el-select v-model="formData.value10" size="large" style="width: 240px">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const formData = ref({
  value1: null,
  value2: null,
  value3: null,
  value4: null,
  value5: null,
  value6: null,
  value7: null,
  value8: null,
  value9: null,
  value10: null,
})

const options = ref([
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  }
])
</script>

<style lang="less" scoped>
.app {
  .mockdemo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-bottom: 50px;
  }

  .container {
    width: 100%;
    height: 800px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 200px 1fr 200px 100px;
    :not(:nth-child(3n)) span{ //css复习：不是3的倍数的盒子改变字体大小
      font-size: 28px;
      font-weight: 700;
    }

    .box1{
      grid-column: span 3;
      display: flex;
      justify-content: center;
      align-items: center;
      span{
        padding-right: 20px;
      }
    }

    // 隐藏select默认placeholder请选择文字
    :deep(.is-transparent) {
      opacity: 0;
    }

  }
}
</style>

显示效果如下：

01.png

正题来了

实际项目中需要更改日期时间选择器的默认图标和位置，检查DOM结构如下：

02.png

步骤一：

把原来类名为el-input__prefix的隐藏起来，代码如下:

:deep(.el-input__prefix) {
    display: none;
 }

步骤二：

往类名为el-input__suffix-inner的地方，追加进一个i标签，类名为el-icon el-input__icon里面用innerHTML填充svg标签，svg获取可以去iconfont下载，或者直接用检查DOM结构里element-plus的svg标签拷贝下就行啦

最终代码，这里找了iconfont图标库的支付宝图标：

onMounted(() => {

  let keyNodes: NodeList = document.querySelectorAll('.el-input__suffix .el-input__suffix-inner')//获取节点集合

  // console.log(typeof keyNodes[Symbol.iterator]);打印function说明实现了Iterator，可以用for of
  for (const item of keyNodes) {
    console.log(item);
    const iNode = document.createElement("i")//创建一个i标签
    iNode.className = "el-icon el-input__icon"//增加类名,所有浏览器都支持。
    iNode.innerHTML = '<svg t="1706099515515" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1741" width="200" height="200"><path d="M1024.0512 701.0304V196.864A196.9664 196.9664 0 0 0 827.136 0H196.864A196.9664 196.9664 0 0 0 0 196.864v630.272A196.9152 196.9152 0 0 0 196.864 1024h630.272a197.12 197.12 0 0 0 193.8432-162.0992c-52.224-22.6304-278.528-120.32-396.4416-176.64-89.7024 108.6976-183.7056 173.9264-325.3248 173.9264s-236.1856-87.2448-224.8192-194.048c7.4752-70.0416 55.552-184.576 264.2944-164.9664 110.08 10.3424 160.4096 30.8736 250.1632 60.5184 23.1936-42.5984 42.496-89.4464 57.1392-139.264H248.064v-39.424h196.9152V311.1424H204.8V267.776h240.128V165.632s2.1504-15.9744 19.8144-15.9744h98.4576V267.776h256v43.4176h-256V381.952h208.8448a805.9904 805.9904 0 0 1-84.8384 212.6848c60.672 22.016 336.7936 106.3936 336.7936 106.3936zM283.5456 791.6032c-149.6576 0-173.312-94.464-165.376-133.9392 7.8336-39.3216 51.2-90.624 134.4-90.624 95.5904 0 181.248 24.4736 284.0576 74.5472-72.192 94.0032-160.9216 150.016-253.0816 150.016z" fill="#009FE8" p-id="1742"></path></svg>'
    item.appendChild(iNode)
    iNode.style.position = "absolute"; //根据自己需要调节位置
    iNode.style.top = "8px";
    iNode.style.right = "12px";
  }

})

最终效果：

01.png

扩展一波：

iNode.setAttribute("class", "el-icon el-input__icon") IE6/7不支持setAttribute('class',xxx)方式设置元素的class。

iNode.className = "el-icon el-input__icon" //所有浏览器都支持。

//其他添加和删除class的方法

//添加：节点.classList.add("类名")；

//删除：节点.classList.remove("类名")；

写在最后

本文是通过操作DOM来解决这个需求，如果写的不对或者有更好的解决办法可以在评论区留言哦，觉得这篇文章能给你带来一点点帮助的话，请点个赞再走吧，谢谢！

avatar
文章
阅读
粉丝