添加链接描述
监控输入框输入的内容 如果每次都检查会消耗性能,不建议
解决方法:使用函数节流监控
1.创建局部指令
export default {
methods:{
search(){
console.log("输出指令");
}
},
directives: {
//函数节流 监控输入框 提高性能
throttle: {
// 指令的定义
inserted: function (el, obj) {
let timerId = null
let flag = true
el.addEventListener('input', function () {
if (!flag) return
flag = false
timerId && clearTimeout(timerId)
timerId = setTimeout(function () {
flag = true
//调用绑定在v-throttle上的方法search
obj.value()
}, 1000)
})
}
}
},
}
2.绑定到需要监控的input
<input type="text" placeholder="搜索歌曲、歌手、专辑" v-model="keywords" v-throttle="search">