Vue常用工具函数——（持续更新）_vue 函数

前言

本文记录了一些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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

二、输入框防抖

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26