el-input-number出现的点击+-按钮频现不生效

项目中使用到了高德地图,threejs绘制地图,其中有一些数据配置使用到了el-input-number,展示了控件。 操作过程中,点击 +-号,频频不生效

解决过程

1.手动给+icon设置了点击事件,点击生效,没问题

2.change事件未同步icon的点击事件触发,why,为啥没触发呢

看了下el-input-number的源码,没有点击事件,有个v-repeat-click="decrease" 指令

ini 复制代码
 <span
      class="el-input-number__decrease"
      role="button"
      v-if="controls"
      v-repeat-click="decrease"
      :class="{'is-disabled': minDisabled}"
      @keydown.enter="decrease">
      <i :class="`el-icon-${controlsAtRight ? 'arrow-down' : 'minus'}`"></i>
    </span>
    <span
      class="el-input-number__increase"
      role="button"
      v-if="controls"
      v-repeat-click="increase"
      :class="{'is-disabled': maxDisabled}"
      @keydown.enter="increase">
      <i :class="`el-icon-${controlsAtRight ? 'arrow-up' : 'plus'}`"></i>
    </span>

顺藤摸瓜看看指令啥效果,主要就是mousedown 事件,连续加,mouseup清除了定时器,只有这个功能,不应该不生效呀

ini 复制代码
import { once, on } from 'element-ui/src/utils/dom';
import { isMac } from 'element-ui/src/utils/util';

export default {
  bind(el, binding, vnode) {
    let interval = null;
    let startTime;
    const maxIntervals = isMac() ? 100 : 200;
    const handler = () => vnode.context[binding.expression].apply();
    const clear = () => {
      if (Date.now() - startTime < maxIntervals) {
        handler();
      }
      clearInterval(interval);
      interval = null;
    };

    on(el, 'mousedown', (e) => {
      if (e.button !== 0) return;
      startTime = Date.now();
      once(document, 'mouseup', clear);
      clearInterval(interval);
      interval = setInterval(handler, maxIntervals);
    });
  }
};

看页面控制台的verbose 有这个 [Violation] 'requestAnimationFrame' handler took 91ms 原来这个微任务的时间叠加了。

然后重新copy了组件,去掉了这个v-repeat-click="decrease,加一下click函数。向element-ui 提了issue,配置长按累加/减功能,看有没有时间去改

相关推荐
加个鸡腿儿11 分钟前
从"包裹器"到"确认按钮"——一个组件的三次重构
前端·vue.js·设计模式
子兮曰17 分钟前
AI写代码坑了90%程序员!这5个致命bug,上线就炸(附避坑清单)
前端·javascript·后端
猪八宅百炼成仙22 分钟前
PanelSplitter 组件:前端左右布局宽度调整的实用解决方案
前端
锋利的绵羊38 分钟前
【解决方案】微信浏览器跳出到浏览器打开、跳转到app,安卓&ios
前端
终端鹿41 分钟前
Vue3 核心 API 补充解析:toRef / toRefs / unref / isRef
前端·javascript·vue.js
刘宇琪41 分钟前
如何有效缓解大语言模型生成内容中的事实性错误(幻觉)
前端
英俊潇洒美少年43 分钟前
vue的事件循环
前端·javascript·vue.js
GISer_Jing44 分钟前
Next.js全栈开发实战与面试指南
前端·javascript·react.js
im_AMBER1 小时前
万字长文:从零实现 JWT 鉴权
前端·react.js·express
发量浓郁的程序猿1 小时前
uniapp vue3手搓签名组件
前端