vue函数组件,vue用什么工具开发
本文主要介绍Vue项目中常用的工具函数，通过示例代码详细介绍。对你的学习或者工作有一定的参考价值，有需要的朋友可以参考一下。
目录
前言1、自定义焦点指令1、模式1 2、模式2 3、模式3 2、输入框防抖1、需求2、思路3、代码实现3、关键词高亮1、需求2、思路3、代码演示4、Excel表中存储的格式化时间1、需求2、代码演示总结
前言
本文记录了Vue项目中一些常用的工具函数。为了工具功能的统一管理，这些功能放在src目录下的utils文件夹中。
一、自定义聚焦指令
1、方式一
在循环外，ref querySelector获取输入标签并调用focus()
2、方式二
自定义说明(局部)说明：fofo(插入)，定义后会用在标签上，v-fofo。
3、方式三
建议使用全局自定义指令(高重用性)。在main.js中导入后就可以使用了代码如下(示例):
从“vue”导入Vue
Vue.directive(fofo ，{
已插入(el) {
//判断获取的元素名称
if(El . nodename=== INPUT El . nodename=== TEXTAREA ){
焦点()
}否则{
//尝试从内层获取
el.querySelector(input )。焦点()
}
}
})
二、输入框防抖
1、需求
当用户在输入框中输入内容时，需要监控输入框的输入事件，以便将用户的输入内容反馈给服务器。但是，当输入框的值发生变化时，立即发送Ajax请求会导致一些不必要的Ajax请求。当用户停止输入并等待一定时间后，再向后台发送请求，可以减少一些不必要的请求。
2、思路
当用户开始输入时，启动一个定时器。如果用户计数后没有再次输入内容，就向后台发送Ajax请求。如果用户在规定时间内再次输入，上一个计时器将被清除，计时器将重新计时。
3、代码实现
这里有一个例子来演示，理解了实现原理之后，就可以把代码拉出来了。代码如下(示例):
模板
差异
输入类型= text v-model= kw @ input= input fn /
/div
/模板
脚本
导出默认值{
data(){
返回{
千瓦：，
计时器：空
}
},
方法：{
inputFn(){
clearTimeout(this.timer)
this.timer=setTimeout(()={
if(this.kw=== )返回
//这里可以发送Ajax请求，根据用户输入的关键字，得到后台返回的搜索关联列表。
console.log(this.kw)
}，1000) //当用户停止输入内容一秒钟，定时器中的逻辑就会被执行。如果在一秒钟内再次写入内容，计时器将再次计时。
}
}
}
/脚本
三、关键字高亮
1、需求
当用户在输入框中搜索某个关键词时，关联列表中显示的关键词会发生颜色变化，这样用户可以更直观地看到想要的结果。
2、思路
封装了一个lightFn函数，它接收两个参数，第一个是修改后的字符串，第二个是要匹配的关键字。
3、代码演示
代码如下(示例):
export const lightFn=(str，targetStr)={
//忽略大小写并全局匹配
const reg=new RegExp(targetStr， ig )
return str.replace(reg，match={
return ` span style= color:red $ { match }/span `返回
})
}
四、格式化Excel表格中存储的时间
1、需求
将要从Excel格式导入的Excel表中存储的时间转换为存储时的格式。
2、代码演示
这段代码引自蓝雨溪。感谢这位大佬，收录于此~代码如下(示例):
导出函数formatExcelDate(number，format=/) {
const time=新日期((数字-25567)* 24 * 3600000-5 * 60 * 1000-43 * 1000-24 * 3600000-8 * 3600000)
time.setYear(time.getFullYear())
const year=time.getFullYear()
const month=time.getMonth() 1
const date=time.getDate()
if (format format.length===1) {
返回年格式月格式日期
}
返回年份(第10个月？0 月：月)(日期10？“0”日期：日期)
}
总结
关于Vue项目中常用工具函数的这篇文章到此为止。关于Vue中常用工具功能的更多信息，请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。