收集日常開發中常用到的一些工具方法, 包含 vue 的公用過濾器、公用指令等 (PS: 懶人養成記)

公用自定義過濾器

import Vue from 'vue'

import moment from 'moment'

/**

* @filter dateFormat 時間格式化

* @param {String, Date} value 可被 new Date 解析的字符串

* @param {String} formatStr moment 的 format 字符串

* 使用方法 {{ 2019-1-1 | dateFormat() }}

*/

Vue.filter('dateFormat', (value, formatStr) => {

return moment(value).format(formatStr || 'YYYY年MM月DD日 hh:mm:ss')

})

/**

* @filter digitUppercase 人民幣金額轉成漢字大寫

* @param {Number} value 金額數字

* 使用方法 {{ 1111 | digitUppercase }}

*/

Vue.filter('digitUppercase', (value) => {

if (Number(value)) {

let fraction = ['角', '分']

let digit = [

'零', '壹', '貳', '叁', '肆',

'伍', '陸', '柒', '捌', '玖'

]

let unit = [

['元', '萬', '億'],

['', '拾', '佰', '仟']

]

let head = value < 0 ? '欠' : ''

value = Math.abs(value)

let s = ''

for (let i = 0; i < fraction.length; i++) {

s += (digit[Math.floor(value * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '')

}

s = s || '整'

value = Math.floor(value)

for (let i = 0; i < unit[0].length && value > 0; i++) {

let p = ''

for (let j = 0; j < unit[1].length && value > 0; j++) {

p = digit[value % 10] + unit[1][j] + p

value = Math.floor(value / 10)

}

s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s

}

return head + s.replace(/(零.)*零元/, '元')

.replace(/(零.)+/g, '零')

.replace(/^整$/, '零元整')

} else {

return '零元整'

}

})

公用自定義指令

import Vue from 'vue'

/**

* @directive preventReClick 防止按鈕在短時間內多次點擊造成的多次請求(一般用于提交按鈕)

* @param {Element} el 綁定的元素

* @param {Number} binding 綁定的時間

* 使用方式

*/

Vue.directive('preventReplaceClick', {

inserted (el, binding) {

el.addEventListener('click', () => {

if (!el.disabled) {

el.classList.add('is-disabled')

const i = document.createElement('i')

i.classList.add('el-icon-loading')

el.prepend(i)

el.classList.add('is-loading')

el.disabled = true

setTimeout(() => {

el.disabled = false

el.classList.remove('is-disabled')

el.classList.remove('is-loading')

el.removeChild(i)

}, binding.value || 1000)

}

})

}

})

實用方法

節流和防抖

/**

* 應用場景

* debounce(抖動)

* search搜索聯想，用戶在不斷輸入值時，用防抖來節約請求資源。

* window觸發resize的時候，不斷的調整瀏覽器窗口大小會不斷的觸發這個事件，用防抖來讓其只觸發一次

*

* throttle(節流)

* 鼠標不斷點擊觸發，mousedown(單位時間內只觸發一次)

* 監聽滾動事件，比如是否滑到底部自動加載更多，用throttle來判斷

*/

// 防抖

export function debounce (fn, delay = 200) {

let timer

return function () {

let th = this

let args = arguments

if (timer) {

clearTimeout(timer)

}

timer = setTimeout(function () {

timer = null

fn.apply(th, args)

}, delay)

}

}

// 節流

export function throttle (fn, interval = 200) {

let last

let timer

return function () {

let th = this

let args = arguments

let now = +new Date()

if (last && now - last < interval) {

clearTimeout(timer)

timer = setTimeout(function () {

last = now

fn.apply(th, args)

}, interval)

} else {

last = now

fn.apply(th, args)

}

}

}

時間格式化處理

```javascript

// 格式化 startDate 和 endDate

import moment from ‘moment'

import _ from ‘lodash'

/**

@method timerByAdd 計算相對當前時間后N個單位時間的日期(加法)

@param num {Number} 相對于幾個時間點

@param timer {String} 時間單位 ‘days' ‘months' ‘years‘ 更多時間單位參考moment官方文檔

@param formatStr {String} moment 的 format 字符串

@return {Object} {startDate,endDate}

*/

export function timerByAdd ({

num,

timer = ‘days'

} = {}, formatStr = ‘YYYY-MM-DD') {

let startDate

let endDate = moment().format(formatStr)

num ? startDate = moment().add(num, timer).format(formatStr) : startDate = endDate

let result = {

startDate,

endDate

}

return result

}

/**

@method timerBySubtract 計算相對當前時間前N個單位時間的日期(減法)

@param num {Number} 相對于幾個時間點

@param timer {String} 時間單位 ‘days' ‘months' ‘years‘ 更多時間單位參考moment官方文檔

@param formatStr {String} moment 的 format 字符串

@return {Object} {startDate,endDate}

*/

export function timerBySubtract ({

num,

timer = ‘days'

} = {}, formatStr = ‘YYYY-MM-DD') {

let startDate

let endDate = moment().format(formatStr)

num ? startDate = moment().subtract(num, timer).format(formatStr) : startDate = endDate

let result = {

startDate,

endDate

}

return result

}

/**

@method timerFormat 將對象時間轉成數組形式

@param {Object} timer {startDate, endDate}

*/

export function timerFormat (timer) {

if (

.isObject(timer)) {

return

.values(timer)

}

}

總結

以上所述是小編給大家介紹的Vue.js 中的實用工具方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！

如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的vue 懒人_Vue.js 中的实用工具方法【推荐】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。