Vue項目中常用的工具函數(shù)總結(jié)
前言
本文記錄了一些Vue項目中常用的工具函數(shù),為了工具函數(shù)的統(tǒng)一管理,統(tǒng)一將這些函數(shù)放到src目錄下的utils文件夾里
一、自定義聚焦指令
1、方式一
mouted周期,ref+querySelector獲取到input標(biāo)簽,調(diào)用focus()
2、方式二
自定義指令(局部) directives:fofo(inserted),定義好以后在標(biāo)簽上使用, v-fofo
3、方式三
全局的自定義指令,推薦使用(復(fù)用性高)。 在main.js中導(dǎo)入后使用即可。 代碼如下(示例):
import Vue from 'vue'
Vue.directive("fofo",{
inserted(el) {
// 判斷拿到的元素名稱
if (el.nodeName === 'INPUT' || el.nodeName === 'TEXTAREA') {
el.focus()
} else {
// 嘗試向內(nèi)層獲取一下
el.querySelector('input').focus()
}
}
})
二、輸入框防抖
1、需求
用戶在輸入框中輸入內(nèi)容的時候,要拿到用戶輸入的內(nèi)容反饋給服務(wù)器,就需要需要監(jiān)聽輸入框的input事件,但是當(dāng)輸入框的值發(fā)生改變就立即發(fā)送一次Ajax請求,會造成一些不必要的Ajax請求。當(dāng)用戶停止輸入等待一定時間后,再向后臺發(fā)送請求,就可以減少一些不必要的請求。
2、思路
當(dāng)用戶開始輸入后,開啟一個定時器,如果計時結(jié)束后,用戶沒有再次輸入內(nèi)容,就向后臺發(fā)送Ajax請求。如果規(guī)定時間內(nèi),用戶再次輸入,就清除上一次的定時器,重新計時。
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ù)用戶輸入的關(guān)鍵字拿到后臺返回的搜索聯(lián)想列表
console.log(this.kw)
}, 1000) // 當(dāng)用戶停止輸入內(nèi)容一秒后會執(zhí)行定時器內(nèi)的邏輯,如果一秒內(nèi)又寫了內(nèi)容就會重新計時
}
}
}
</script>
三、關(guān)鍵字高亮
1、需求
當(dāng)用戶在輸入框搜索某個關(guān)鍵字后,將展示出來的聯(lián)想列表中的關(guān)鍵字改變顏色,可以讓用戶更直觀的看到想要的結(jié)果。
2、思路
封裝一個lightFn函數(shù),這個函數(shù)接收兩個實參, 第一個是接收被修改字符串,第二個是要匹配的關(guān)鍵字
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、需求
將需要導(dǎo)入的Excel表格中存儲的時間,從Excel的格式轉(zhuǎn)換為存儲時的格式。
2、代碼演示
此代碼引自藍(lán)雨溪,感謝這位大佬,這里收錄一下~ 代碼如下(示例):
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)
}
總結(jié)
到此這篇關(guān)于Vue項目中常用的工具函數(shù)的文章就介紹到這了,更多相關(guān)Vue常用工具函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3+antDesignVue實現(xiàn)表單校驗的方法
這篇文章主要為大家詳細(xì)介紹了基于Vue3和antDesignVue實現(xiàn)表單校驗的方法,文中的示例代碼講解詳細(xì),具有一定的參考價值,需要的小伙伴可以了解下2024-01-01
如何用vue-cli3腳手架搭建一個基于ts的基礎(chǔ)腳手架的方法
這篇文章主要介紹了如何用vue-cli3腳手架搭建一個基于ts的基礎(chǔ)腳手架的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
vue-cli的build的文件夾下沒有dev-server.js文件配置mock數(shù)據(jù)的方法
這篇文章主要介紹了vue-cli的build的文件夾下沒有dev-server.js文件配置mock數(shù)據(jù)的方法,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04
vue從后端獲取到文件的?url?地址及前端根據(jù)?url?地址下載文件的實現(xiàn)思路
這篇文章主要介紹了vue?中從后端獲取到文件的?url?地址及前端根據(jù)?url?地址下載文件,項目用的是?vben?admin?框架,用的是?vue3?+?TS,后端返回的是文件的?url?地址,對vue后端獲取?url?地址的相關(guān)知識感興趣的朋友一起看看吧2024-02-02
vue實現(xiàn)在線預(yù)覽office文件的示例代碼
本文主要介紹了vue實現(xiàn)在線預(yù)覽office文件,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-10-10

