用Element-Plus实现一个日期组件,日期选项均为5的倍数

背景

由于最近的项目是做一个关于电量、电费读取抄表数据的一个任务。有一个逻辑是电量每5分钟会获取一次。所以选择用Elementui-Plus的 el-date-picker 实现。type="datetime",分钟数据只有0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55这几个值

但是 Element-Plus 提供的组件不支持直接配置可选择的项的值。

组件实现

实际期待的效果,期望分钟的选项是0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55这些数据。

方案一

实现思路:将非[0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55]这些数据的项都隐藏掉。实现时机:在打开日期选择器的弹框时,就修改下拉项。

代码:

ini 复制代码
const visibleChange = (openVisible)=> {
  console.log('时间选择器',datetimeRef.value)
  // document.addEventListener('focus', handleGlobalFocus, false);
  var elements = document.querySelectorAll(".el-input__inner");
  for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener("focus", function () {
      let resultNode = document.querySelectorAll(
        ".el-scrollbar__view.el-time-spinner__list"
      );
      for (let j = 0; j < resultNode.length; j++) {
        let item_j = resultNode[j];
        if (item_j.childNodes.length == 64) {
          for (let k = 0; k < item_j.childNodes.length; k++) {
            let item_k = item_j.childNodes[k];
            if (item_k.innerHTML && Number(item_k.innerHTML) % 5 != 0) {
              item_k.style.display = "none";
            }
          }
        }
      }
    });
  }
}

这个能实现5分钟的项,但是滚动就会出现问题。滚动不会实时展示对应的5分钟数值。而是从0开始的有序数字。有瑕疵的方案之一。

方案二

同方案一一样思路,只不过变成从disabled-minutes出发控制数据。

javascript 复制代码
const datetimeRef = ref(null)
const visibleChange = (openVisible)=> {
  console.log('时间选择器',datetimeRef.value)
  document.addEventListener('focus', handleGlobalFocus, false);
}

const disabledMinutes = () => {
  handleInvalidMinutes()
  return Array.from({ length: 12 },(v,k) =>k ).filter( minutes =>  ![0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55].includes(minutes))
}

const handleInvalidMinutes = () => {
  nextTick(() => {
    const minuteItems = document.querySelectorAll(".el-time-panel .el-time-spinner__wrapper:nth-child(2n) .el-time-spinner__item");
    minuteItems.forEach(item => {
      const minute = parseInt(item.textContent, 10) 
      if(![0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55].includes(minute)) {
        item.classList.add('is-disabled')
        item.style.display = 'none'
      } else {
        item.classList.remove('is-disabled')
        item.style.display = ''
      }
    })
  })
}

const handleGlobalFocus = (event) => {
  const target = event.target;
  if (target && target.closest('.el-date-range-picker__time-picker-wrap:nth-child(2n) .el-input__inner')) {
    handleInvalidMinutes();
  }
};

这个方案也能实现效果。同样来验证一下滚动选中的效果,返现滚动条虽然内有数据展示在输入框的错误瑕疵,但是会出现0,5,15等数据选中在下拉中没有选中效果,输入框正常的瑕疵,滚动条有点不受控。

方案三-完美解决方案

业务方案一:让产品出一个选择YYYY-MM-dd日期后,在选择一次分钟的数据的框,利用 el-date-pickerel-time-picker 组合实现。 业务方案二: 换一种设计形式。

总结

组件原生不支持的方式,可以考虑利用现有支持的方案替换,具体还根据业务自行实现。

该文章仅用于学习记录,不涉及商业传播。

相关推荐
白日依山尽yy2 分钟前
Vue、微信小程序、Uniapp 面试题整理最新整合版
vue.js·微信小程序·uni-app
BillKu27 分钟前
Vue3数组去重方法总结
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue+JSX真香现场:告别模板语法,解锁新姿势!
前端·javascript·vue.js
摸鱼仙人~1 小时前
Vue.js 指令系统完全指南:深入理解 v- 指令
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue列表渲染的坑:为什么不能用index当key?血泪教训总结!
前端·javascript·vue.js
前端小巷子1 小时前
Vue 虚拟 DOM
前端·vue.js·面试
江城开朗的豌豆1 小时前
Vue中key的妙用:为什么你的列表渲染总出bug?
前端·javascript·vue.js
妮妮喔妮3 小时前
图片上传 el+node后端+数据库
javascript·数据库·vue.js
paopaokaka_luck7 小时前
婚纱摄影管理系统(发送邮箱、腾讯地图API、物流API、webSocket实时聊天、协同过滤算法、Echarts图形化分析)
vue.js·spring boot·后端·websocket·算法·echarts
若梦plus9 小时前
Nuxt.js基础与进阶
前端·vue.js