如何实现el-date-picker或el-time-picker图标据右显示?

最新推荐文章于 2024-07-31 16:15:48 发布

Meta.Qing

最新推荐文章于 2024-07-31 16:15:48 发布

阅读量1.8k

点赞数 2

本文链接：https://blog.csdn.net/qq_20173195/article/details/126157584

版权

javascript 同时被 2 个专栏收录

35 篇文章 1 订阅

订阅专栏

Vue

30 篇文章 1 订阅

订阅专栏

本文档展示了如何在Vue中通过mounted生命周期钩子为el-date-picker和el-time-picker组件添加自定义图标，并调整输入框的样式。通过创建元素并设置样式，隐藏默认前缀，调整后缀位置，实现了日期时间选择器的个性化定制。

摘要由CSDN通过智能技术生成

实习效果如下:

关键代码如下:

 <div class="date_box">
     <el-date-picker
      v-model="dates"
      size="small"
      type="date"
      placeholder="选择日期"
      align="right"
      :picker-options="pickerOptionsdDate">
    </el-date-picker>
      <el-time-picker
      size="small"
      style="margin-left:15px;width:150px"
      v-model="time"
  >
  </el-time-picker>
  </div>

mounted时候添加节点:(关键)

  mounted() {
    const keyNodeList = document.querySelectorAll('.el-date-editor')
    keyNodeList.forEach((element, index) => {
      const iNode = document.createElement('i')
      iNode.setAttribute('class', index == 1 ? 'el-icon-time' : 'el-icon-date') // el-icon-bottom
      element.appendChild(iNode)
      iNode.style.position = 'absolute'
      iNode.style.top = '9px'
      iNode.style.right = '8px'
      iNode.style.color = '#c8cbd2'
    })
  },

SCSS样式:


<style lang="scss" scoped>
/deep/.el-input__prefix {
  display: none;
  width: 0px;
}

//实际偏离多少像素，在进行调整
/deep/.el-input__suffix {
  right: 19px;
}
</style>