这几天学习Vue的官网,看到 customRef 提供了一个例子,研究半天发现这是一个防抖函数,觉得挺好,于是把这个例子扩展了一下,可以用于表单子控件和查询子控件。

需求

  • v-model

    基于 element-plus 封装表单控件,同时也要封装一下表单子控件,还有查询控件。

    由于 el-input 这类的组件,把 value 封装成了 v-model,所以无法把组件的属性直接设置给内部的 el-input。

    必须在内部设置一个变量,然后做“属性” <==> “变量” 的转换。

    这样就比较麻烦,需要一个既优雅又实用的方式来解决。

  • 查询的防抖

    查询的时候,理想情况是用户输入一个完整的查询条件,然后自动去后端申请查询,但是vue默认的响应形式是,输入一个字符就会响应,如果立即去后端查询的话,会造成浪费的情况,另外用户体验也不好。

    如果用change事件,那么用户输入完毕,还得在其他的地方点一下,比较麻烦。

    所以需要一个简单的方式,比如防抖功能来优化用户体验。

设计

用 customRef (自定义的ref)设计get 和 set。

  • get:获取组件属性,返回给内部组件,比如 el-input。
  • set:用smit提交给父组件。
  • settimeout:实现防抖。

实施验证

想法挺好的,演示为0的时候也是好用的,但是把延迟设为200的时候确出现问题,首先是 el-input 的字符显示也一起延迟了,另外只会显示最后一个字符,中间的字符都被吃掉了。

这是怎么回事?用html5的 input 试验的时候是没有问题的呀。

办法重臂困难多,几经修改之后终于好用了。

/**
* 自定义的ref,实现属性和内部变量的数据转换
* @param { reactive } props 组件的属性
* @param { object } context 组件的上下文
* @param { number } delay 延迟刷新的时间,单位:毫秒,默认:0
* @param { string } name 要对应的属性名称,默认:modelValue
* @returns 自定义的ref
*/
export const debounceRef = (props, context, delay = 0, name = 'modelValue') => {
let value = props[name]
// 计时器
let timeout
// 是否输入状态。输入时取 value;输入完毕取 modelValue 属性
let isInput = false
return customRef((track, trigger) => {
return {
get () {
track()
if (isInput) {
return value
} else {
return props[name]
}
},
set (newValue) {
isInput = true
value = newValue // 绑定值
trigger() // 组件内部刷新模板
clearTimeout(timeout) // 清掉上一次的计时
timeout = setTimeout(() => {
// 修改 modelValue 属性
context.emit(`update:${name}`, newValue) // 提交给父组件
// 用于区分是哪个组件触发的事件。
context.emit('my-change', newValue, props.controlId, props.colName)
isInput = false
}, delay)
}
}
})
}
  • 参数
  1. props: 组件的属性,便于属性值变更的时候可以获得最新值。
  2. context 组件的上下文,方便向父组件提交。
  3. name:v-model的名称,默认是 modelValue。
  4. delay:延迟时间,默认是0。
  • value:内部变量,用于初始值和用户输入的时候的绑定。

  • let timeout:定时器,便于清掉之前的定时。

  • let isInput = false

    用户的输入状态,如果用户处于敲键盘的状态,那么获取内部的 value 绑定到 el-inupt;

    如果用户没有敲键盘,那么获取父组件的属性值,绑定到 el-inupt。

为啥要这么设置呢?没办法,如果直接获取组件的属性值的话,那么会出现延迟的情况,如果获取内部 value 的话,父组件的属性变化的时候,内部 el-input 不会有变化,所以只好这么折腾一下。

后面的就是常规操作了,get 里面根据状态获取属性和 value,set 里面向父组件提交。

使用

setup (props, context) {
const value = debounceRef(props, context)
return {
value
}
}
 <el-input v-model="value"></el-input>

基本上和普通的 ref 很像,只是需要设置组件的属性和上下文。

  • 如果名称不是默认的 modelValue 的话,需要传递名称;
  • 如果需要延迟响应的话,需要设置延迟时间,默认是不延迟的。

缺点:

  • 灵活性欠佳,只是针对一个特定需求封装的,没有考虑更多的情况。其他情况在写个函数好了,函数要符合原子性,不要承担太多的职责。

  • 还是要传递属性和上下文,这个也没啥办法省略。

  • CheckBox又不支持延迟了。记得之前好用的。。。

优点:

  • 自我感觉还是比较优雅的。

用 customRef 做一个防抖函数,支持 element 等UI库。的更多相关文章

  1. JS节流和防抖函数

    一. 实现一个节流函数 // 思路:在规定时间内只触发一次function throttle (fn, delay) {  // 利用闭包保存时间  let prev = Date.now()  re ...

  2. 做一个牛XX的身份证号验证类(支持15位和18位)

    原文:做一个牛XX的身份证号验证类(支持15位和18位) #region 是否合法的中国身份证号码 protected bool IsChineseID() { if (str.Length == 1 ...

  3. 告别收费BI!如何自己动手做一个免费的可视化数据报表还支持文档在线预览?

    本人大学刚毕业目前在一家互联网公司从事产品运营工作,一季度刚过,公司需要我出一份产品运营数据报表,由于产品用户数据.订单数据等数据量太大,我希望找一款Bi产品,支持我做出一个精美的可视化报表,还可以让 ...

  4. vue-cli3和element做一个简单的登陆页面

    1.先用vue-cli3创建一个项目 2.安装element模块 全局安装 npm i element-ui -S 3在main.js引入模块 import ElementUI from 'eleme ...

  5. [转]jsPlumb插件做一个模仿viso的可拖拉流程图

    原贴:https://www.cnblogs.com/sggx/p/3836432.html 前言 这是我第一次写博客,心情还是有点小小的激动!这次主要分享的是用jsPlumb,做一个可以给用户自定义 ...

  6. 4-13 Webpacker-React.js; 用React做一个下拉表格的功能: <详解>

    Rails5.1增加了Webpacker: Webpacker essentially is the decisions made by the Rails team and bundled up i ...

  7. 【Qt】2.4 做一个“猜数字”的游戏

    使用对话框和Qt设计师来实现一个相当简单的小游戏.同时将通过这个程序来看布局的隐藏和显示是如何来影响窗口界面的变化的. 新建一个Qt项目,把Qt Creator默认给的mainwindow.h.mai ...

  8. 如何实现一个malloc函数

    一.概述 1.malloc简介 函数所在头文件:<stdlib.h> 函数原型是:void *malloc (size_t n) 函数功能:在内存的动态存储区中分配一个长度为size的连续 ...

  9. 又见angular----步一步做一个angular4小项目

    这两天看了看angular4的文档,发现他和angular1.X的差别真的是太大了,官方给出的那个管理英雄的Demo是一个非常好的入门项目,这里给出一个管理个人计划的小项目,从头至尾一步一步讲解如何去 ...

随机推荐

  1. WebXR All in One

    WebXR All in One VR / WebVR WebXR https://www.w3.org/TR/webxr/ WebXR Device API https://immersiveweb ...

  2. GitHub 500 error

    GitHub 500 error 无法访问了, GitHub 挂了又! error reports Downdetector Github down? Current service status a ...

  3. yapi & mock JSON

    yapi & mock JSON json, body https://hellosean1025.github.io/yapi/documents/mock.html response bo ...

  4. vscode & typescript & optional-chaining bug

    vscode & typescript & optional-chaining bug https://www.cnblogs.com/xgqfrms/p/11745541.html ...

  5. js IdleDetector 检测用户是否处于活动状态API

    btn.addEventListener("click", async () => { try { const state = await Notification.requ ...

  6. nasm and golink create a DLL x86

    制作DLL xxx.asm: %macro fb 0 push ebp mov ebp,esp %endmacro %macro fa 1 mov esp,ebp pop ebp ret %1 %en ...

  7. js 创建简单的表单同步验证器

    SyncValidate declare const uni: any; export interface SyncValidateOpt { [key: string]: SyncValidateF ...

  8. BGV上线17小时最高888.88美金,投资最高回报率近+1778倍, 带动NGK内存暴涨

    至12月3日BGV币上线A网交易所DeFi板块以来,BGV价值飙升长.,据非小号的数据显示,BGV币价是718美元(东八区时间2020年12月4日早上九点四十),相较昨日涨幅达70.14%,以718美 ...

  9. 【重榜?】.NET 6 Preview 1 开箱上手!带你尝试新版本更新!

    目录 跨平台 UI 应用 Blazor 桌面应用 System.CommandLine 其它更新 ASP.NET Core 最近 .NET 6 Preview 1 发布了,.NET 统一是此版本的核心 ...

  10. C++算法代码——三连击[NOIP1998 普及组]

    题目来自:https://www.luogu.com.cn/problem/P1008 题目背景 本题为提交答案题,您可以写程序或手算在本机上算出答案后,直接提交答案文本,也可提交答案生成程序. 题目 ...