脚本宝典收集整理的这篇文章主要介绍了Vue项目中常用的工具函数总结，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
本文记录了一些Vue项目中常用的工具函数，为了工具函数的统一管理，统一将这些函数放到src目录下的utils文件夹里
mouted周期，ref+querySelector获取到input标签，调用focus()
自定义指令（局部） directives:fofo(inserted),定义好以后在标签上使用， v-fofo
全局的自定义指令，推荐使用(复用性高)。 在main.js中导入后使用即可。 代码如下（示例）：
import Vue From 'vue' Vue.directive("fofo",{ inserted(el) { // 判断拿到的元素名称 if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') { el.focus() } else { // 尝试向内层获取一下 el.querySelector('input').focus() } } })
用户在输入框中输入内容的时候，要拿到用户输入的内容反馈给服务器，就需要需要监听输入框的input事件，但是当输入框的值发生改变就立即发送一次Ajax请求，会造成一些不必要的Ajax请求。当用户停止输入等待一定时间后，再向后台发送请求，就可以减少一些不必要的请求。
当用户开始输入后，开启一个定时器，如果计时结束后，用户没有再次输入内容，就向后台发送Ajax请求。如果规定时间内，用户再次输入，就清除上一次的定时器，重新计时。
这里用一个例子演示，理解实现原理后，可以将代码抽离出来。 代码如下（示例）：
<template>
<div>
<input tyPE="text" v-model="kw" @input="inputFn"/>
</div>
</template>
<script>
export default{
data(){
return{
kw:'',
timer:null
}
},
methods:{
inputFn(){
clearTimeout(this.timer)
this.timer = setTimeout(() => {
if(this.kw === '') return
// 这里可以发送Ajax请求，根据用户输入的关键字拿到后台返回的搜索联想列表
console.LOG(this.kw)
}, 1000) // 当用户停止输入内容一秒后会执行定时器内的逻辑，如果一秒内又写了内容就会重新计时
}
}
}
</script>
当用户在输入框搜索某个关键字后，将展示出来的联想列表中的关键字改变颜色，可以让用户更直观的看到想要的结果。
封装一个lightFn函数，这个函数接收两个实参， 第一个是接收被修改字符串，第二个是要匹配的关键字
代码如下（示例）：
export const lightFn = (str, targetStr) => { // 忽略大小写且全局匹配 const reg = new RegExp(targetStr, 'ig') return str.replace(reg, match => { return `<span style="color:red">${match}</span>` }) }
将需要导入的Excel表格中存储的时间，从Excel的格式转换为存储时的格式。
此代码引自蓝雨溪，感谢这位大佬，这里收录一下~ 代码如下（示例）：
export function forMATExcelDate(numb, format = '/') { const time = new Date((numb - 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) { return year + format + month + format + date } return year + (month < 10 ? '0' + month : month) + (date < 10 ? '0' + date : date) }
到此这篇关于Vue项目中常用的工具函数的文章就介绍到这了,更多相关Vue常用工具函数内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的Vue项目中常用的工具函数总结全部内容，希望文章能够帮你解决Vue项目中常用的工具函数总结所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。