给 element-plus 增加一个防抖的功能(二)

简介: element-plus 功能非常强大,但是好像只有 el-autocomplete 提供了一个防抖功能,其他表单子控件并没有提供防抖功能,而 el-autocomplete 的防抖和我想要的效果又不太一样,所以只好写个函数实现我想要的防抖效果。

封装控件

为了更方便使用,我们可以基于 el-input 做二次封装,建立一个 text.vue 的文件。

text.vue,模板:

<template>
<el-input
v-model="value"
clearable
@blur="myblur"
@change="mychange"
@clear="myclear"
@keydown="mykeydown"
>
el-input>
template>


代码:

import debounceRef from'../js/debounceRef.js'
// 设置属性
const props = defineProps({
modelValue: [String, Number],
model: Object,
colName: String
})
// 设置提交
const emit = defineEmits(['update:modelValue'])
const events = {
run: () => {},
clear: () => {}
}
const value = debounceRef(props, events, emit)
// 在点击由 clearable 属性生成的清空按钮时触发
const myclear = () => {
events.run() // 立即执行
}
// 仅在输入框失去焦点或用户按下回车时触发
const mychange = () => {
events.run() // 立即执行
}
// 在 Input 失去焦点时触发
const myblur = () => {
events.run() // 立即执行
}
// 按键,用于汉字的连续输入
const mykeydown = (e) => {
// console.log('按键信息:', e)
events.clear()
}


这样在使用的时候就可以很方便了。

使用封装的控件

模板:

<nf-text v-model="retUser.name">nf-text>
<nf-text :model="retUser" colName="name" >nf-text>

代码:

const retUser = reactive({
name: '对象的响应性',
address: '',
age: 18,
like: []
})
  • v-model vs proxy 一般都是使用 v-model 的方式来实现双向绑定,但是我感觉有点绕圈圈,既然表单有一个 model 对象,那么为啥不能直接修改呢?于是设置了这种兼容方式,可以使用 v-model,也可以传入 model 和 属性名称,然后在子组件里面就可以通过 proxy 的 set 拦截的方式实现**“直接”**的修改。

不封装组件,直接使用

如果我就是不想封装,我想直接用行不行?当然是可以的,只需要设置好参数即可。

const retUser = reactive({
name: '对象的响应性',
address: '',
age: 18,
like: []
})
const addressProps = {
model: retUser,
colName: 'address'
}
const events = {
run: () => {},
clear: () => {}
}
const address = debounceRef(addressProps, events)
// 按键,用于汉字的连续输入
const mykeydown = (e) => {
events.clear()
}


依据 model 设置对象,再设置回调函数的对象即可。然后的用法类似于 computed。

当然这样看起来就比较麻烦了,因为一开始就是基于二次封装组件来设计的。

除了文本框还支持其他吗?

各种表单子控件,基本都支持,比如CheckBoxGroup等,虽然其 value 是数组形式,但是也同样支持的,效果就是:选择选项一、二、三,然后一起响应。


<template>
<el-checkbox-group v-model="checkList">
<el-checkbox label="Option A" />
<el-checkbox label="Option B" />
<el-checkbox label="Option C" />
<el-checkbox label="Option D" />
<el-checkbox label="Option E" />
el-checkbox-group>
<div v-if="model" style="display: none;">{{model[colName]}}div>
template>


// 设置属性
const props = defineProps({
modelValue: [Array],
model: Object,
colName: String
})
const emit = defineEmits(['update:modelValue'])
const events = {
run: () => {},
clear: () => {}
}
const checkList = debounceRef(props, events, emit)


这里就不需要设置各种事件了。

总结

个人感觉还是挺方便的。你可能觉得没必要二次封装,其实上面介绍的封装,只是整个二次封装的一小部分代码,还有其他各种功能。

不知道大家有没有猜出来我想实现什么功能?

本文作者:自然框架

个人网址:jyk.cnblogs.com

声明:本文为 脚本之家专栏作者 投稿,未经允许请勿转载。

相关文章
|
6月前
|
JavaScript 前端开发
事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。
【6月更文挑战第27天】事件委托是JS技巧,通过绑定事件到父元素利用事件冒泡,减少事件处理器数量,提高性能和节省内存。例如,动态列表可共享一个`click`事件处理器,通过`event.target`识别触发事件的子元素,简化管理和响应动态内容变化。
50 0
|
3月前
|
JavaScript
echarts根据上级元素的大小自动更新echarts(element-resize-detector)配合防抖解决大屏页面卡顿的问题
如何在Vue中使用`element-resize-detector`库来自动更新ECharts图表的大小,以适应其上级元素大小的变化,并结合使用防抖技术来解决大屏页面上的卡顿问题。
146 5
|
2月前
|
前端开发
前端常用方法防抖(debounce)和节流(throttle)的示例演示及应用场景说明
前端常用方法防抖(debounce)和节流(throttle)的示例演示及应用场景说明
26 0
|
3月前
|
前端开发 JavaScript UED
debounce(防抖)和 throttle(节流)是两种非常实用的技术,它们可以帮助我们有效地控制函数的执行频率,提高应用的性能和用户体验。
【9月更文挑战第1天】在前端开发中,频繁的用户操作可能导致性能问题。为此,debounce(防抖)和 throttle(节流)技术应运而生,有效控制函数执行频率,提升应用性能和用户体验。debounce 原理是在一定时间内仅执行最后一次事件,减少不必要的计算;throttle 则确保函数按固定频率执行,保证基本响应速度。二者广泛应用于搜索实时反馈、滚动事件处理等场景,可通过原生 JavaScript 或第三方库如 Lodash 实现。正确使用可显著改善应用性能。
54 8
|
7月前
|
JavaScript 前端开发 UED
JavaScript 持续变化:setTimeout 与 setInterval 的巧妙应用
JavaScript 持续变化:setTimeout 与 setInterval 的巧妙应用
63 1
Echarts组件属性function回调函数的灵活使用调整不同的图表状态
Echarts组件属性function回调函数的灵活使用调整不同的图表状态
210 0
Echarts组件属性function回调函数的灵活使用调整不同的图表状态
|
JavaScript API
给 element-plus 增加一个防抖的功能(一)
element-plus 功能非常强大,但是好像只有 el-autocomplete 提供了一个防抖功能,其他表单子控件并没有提供防抖功能,而 el-autocomplete 的防抖和我想要的效果又不太一样,所以只好写个函数实现我想要的防抖效果。
|
JavaScript 前端开发
【高频触发事件优化】封装节流和防抖
【高频触发事件优化】封装节流和防抖
172 0
|
前端开发 JavaScript IDE
一些关于JS的过程抽象的高阶函数的使用的例子(单次点击,防抖,节流)
在JavaScript中,我们很常见的是需要掌握**过程抽象**的思想。对于过程抽象,是函数式编程思想的应用。而 **高阶函数(HOF)**  便是过程抽象的体现之一。 接下来我们就来一起学习一下常见的高阶函数。 # Once 在一些场景下,我们可能会遇到这样的需求,我们做了一个报名页面,然后需要用户提交报名成功的个人信息,但是用户可能会因为手抖,或者是一些网络的卡顿之类的原因,造成了用户在短时间内大量点击提交按钮,这时候可能会突然出现很多用户提交的相同的信息,为了避免这种情况,我们可以在前端做出一定的优化。 我们可以利用这样的高阶函数来完成优化: ``` function once
|
JavaScript
vue 里 onresize 事件被覆盖,以及怎么实现 resize 防抖、移除 resize 事件?
vue 里 onresize 事件被覆盖,以及怎么实现 resize 防抖、移除 resize 事件?
498 0