ElementUI - select 组件 引发的思路比较

783 阅读1分钟

需求

限制输入搜索的字数到 50

现状

使用了 ElementUI 的 select 组件,可输入搜索模式,输入内容后触发远程请求,展示在下拉列表中,该组件根据 talk 条数,每条talk里面都有一个这个 select 组件,input 的 原生事件都被包裹没有暴露出来

实现

普通思路:

在当前form组件 mounted时,在nextTick中判断是否存在talk,如果存在,则根据条数循环地找到每条下面的 input 元素,为之 setAttribute(‘maxlength’, ’50’)

这样做的问题是,需要做计算,判断,循环,浪费性能,代码冗余

大神思路:在focus事件时处理

既然能focus,说明此时talk肯定已存在,input元素也已经存在了,此处节省判断和循环 在focus时给 e.target.setAttribute('maxlength', '50'), e.target 取得的是 DOM 元素,可以直接 setAttribute() 只在 focus 时触发,节约性能