Vue項目中常用的工具函數(shù)總結
前言
本文記錄了一些Vue項目中常用的工具函數(shù)，為了工具函數(shù)的統(tǒng)一管理，統(tǒng)一將這些函數(shù)放到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、需求
用戶在輸入框中輸入內容的時候，要拿到用戶輸入的內容反饋給服務器，就需要需要監(jiān)聽輸入框的input事件，但是當輸入框的值發(fā)生改變就立即發(fā)送一次Ajax請求，會造成一些不必要的Ajax請求。當用戶停止輸入等待一定時間后，再向后臺發(fā)送請求，就可以減少一些不必要的請求。
2、思路
當用戶開始輸入后，開啟一個定時器，如果計時結束后，用戶沒有再次輸入內容，就向后臺發(fā)送Ajax請求。如果規(guī)定時間內，用戶再次輸入，就清除上一次的定時器，重新計時。
3、代碼實現(xiàn)
這里用一個例子演示，理解實現(xiàn)原理后，可以將代碼抽離出來。 代碼如下（示例）：
<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
// 這里可以發(fā)送Ajax請求，根據(jù)用戶輸入的關鍵字拿到后臺返回的搜索聯(lián)想列表
console.log(this.kw)
}, 1000) // 當用戶停止輸入內容一秒后會執(zhí)行定時器內的邏輯，如果一秒內又寫了內容就會重新計時
}
}
}
</script>
三、關鍵字高亮
1、需求
當用戶在輸入框搜索某個關鍵字后，將展示出來的聯(lián)想列表中的關鍵字改變顏色，可以讓用戶更直觀的看到想要的結果。
2、思路
封裝一個lightFn函數(shù)，這個函數(shù)接收兩個實參， 第一個是接收被修改字符串，第二個是要匹配的關鍵字
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項目中常用的工具函數(shù)的文章就介紹到這了,更多相關Vue常用工具函數(shù)內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
Nuxt.js 是一個基于 Vue.js 的通用應用框架。 通過對客戶端/服務端基礎架構的抽象組織， Nuxt.js 主要關注的是應用的 UI渲染,需要的朋友可以參考下2019-05-05
vue?大文件分片上傳(斷點續(xù)傳、并發(fā)上傳、秒傳)
本文主要介紹了vue?大文件分片上傳，主要包括斷點續(xù)傳、并發(fā)上傳、秒傳，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
淺談Vuex@2.3.0 中的 state 支持函數(shù)申明
這篇文章主要介紹了淺談Vuex@2.3.0 中的 state 支持函數(shù)申明，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
vue 插值 v-once,v-text, v-html詳解
這篇文章主要介紹了vue 插值 v-once,v-text, v-html詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
項目中需要用到大量的數(shù)字輸入框限制,為了可以以后能又更多的拓展性,下面這篇文章主要給大家介紹了關于Vue中輸入框僅支持數(shù)字輸入的四種方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-08-08
淺談webpack SplitChunksPlugin實用指南
這篇文章主要介紹了淺談webpack SplitChunksPlugin實用指南，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
這篇文章主要給大家介紹了關于vue中Axios的封裝與API接口的管理的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-08-08
這篇文章主要介紹了vue.js實現(xiàn)的綁定class操作,結合實例形式分析了vue.js綁定class常見的3種操作技巧,需要的朋友可以參考下2018-07-07
Vue 防止短時間內連續(xù)點擊后多次觸發(fā)請求的操作
這篇文章主要介紹了Vue 防止短時間內連續(xù)點擊后多次觸發(fā)請求的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
v-cloak原理是先通過樣式隱藏內容,然后在內存中進行值的替換,將替換的內容再反饋給界面,數(shù)據(jù)渲染完場之后,v-cloak 屬性會被自動去除,本文詳細介紹vue中v-cloak的作用和原理解析,感興趣的朋友一起看看吧2023-09-09