广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue项目中常用的工具函数总结
  • 898
分享到

Vue项目中常用的工具函数总结

vue工具函数vue调用函数vue函数组件 2022-11-12 12:11:07 898人浏览 独家记忆
摘要

目录前言一、自定义聚焦指令1、方式一2、方式二3、方式三二、输入框防抖1、需求2、思路3、代码实现三、关键字高亮1、需求2、思路3、代码演示四、格式化excel表格中存储的时间1、需

前言

本文记录了一些Vue项目中常用的工具函数,为了工具函数的统一管理,统一将这些函数放到src目录下的utils文件夹里

一、自定义聚焦指令

1、方式一

mouted周期,ref+querySelector获取到input标签,调用focus()

2、方式二

自定义指令(局部) directives:fofo(inserted),定义好以后在标签上使用, v-fofo

3、方式三

全局的自定义指令,推荐使用(复用性高)。 在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()
    }
  }
})

二、输入框防抖

1、需求

用户在输入框中输入内容的时候,要拿到用户输入的内容反馈给服务器,就需要需要监听输入框的input事件,但是当输入框的值发生改变就立即发送一次ajax请求,会造成一些不必要的Ajax请求。当用户停止输入等待一定时间后,再向后台发送请求,就可以减少一些不必要的请求。

2、思路

当用户开始输入后,开启一个定时器,如果计时结束后,用户没有再次输入内容,就向后台发送Ajax请求。如果规定时间内,用户再次输入,就清除上一次的定时器,重新计时。

3、代码实现

这里用一个例子演示,理解实现原理后,可以将代码抽离出来。 代码如下(示例):


<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>

三、关键字高亮

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、代码演示

此代码引自蓝雨溪,感谢这位大佬,这里收录一下~ 代码如下(示例):


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常用工具函数内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: Vue项目中常用的工具函数总结

本文链接: https://www.lsjlt.com/news/135127.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作