需求
限制输入搜索的字数到 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
时触发,节约性能