目錄

• 前言
  
• 一、自定義聚焦指令
  
• 1、方式一
  
• 2、方式二
  
• 3、方式三
  
• 二、輸入框防抖
  
• 1、需求
  
• 2、思路
  
• 3、程式碼實現
  
• 三、關鍵字高亮
  
• 1、需求
  
• 2、思路
  
• 3、程式碼演示
  
• 四、格式化Excel表格中儲存的時間
  
• 1、需求
  
• 2、程式碼演示
  
• 總結

前言

本文記錄了一些專案中常用的工具函式，為了工具函式的統一管理，統一將這些函式放到src目錄下的utils資料夾裡

一、自定義聚焦指令

1、方式一

mouted週期，ref+querySelector獲取到input標籤，呼叫focus()

2、方式二

自定義指令（區域性） directives:fofo(inserted),定義好以後在標籤上使用， v-fofo

3、方式三

全域性的自定義指令，推薦使用(複用性高)。 在main.中匯入後使用即可。 程式碼如下（示例）：

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(() => {
       XYvMd
 
         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>`
  })
}

四、XYvMd格式化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常用工具函式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！