vue 懒人_Vue.js 中的实用工具方法【推荐】
收集日常開發(fā)中常用到的一些工具方法, 包含 vue 的公用過濾器、公用指令等 (PS: 懶人養(yǎng)成記)
公用自定義過濾器
import Vue from 'vue'
import moment from 'moment'
/**
* @filter dateFormat 時(shí)間格式化
* @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 人民幣金額轉(zhuǎn)成漢字大寫
* @param {Number} value 金額數(shù)字
* 使用方法 {{ 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 防止按鈕在短時(shí)間內(nèi)多次點(diǎn)擊造成的多次請(qǐng)求(一般用于提交按鈕)
* @param {Element} el 綁定的元素
* @param {Number} binding 綁定的時(shí)間
* 使用方式
*/
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)
}
})
}
})
實(shí)用方法
節(jié)流和防抖
/**
* 應(yīng)用場(chǎng)景
* debounce(抖動(dòng))
* search搜索聯(lián)想，用戶在不斷輸入值時(shí)，用防抖來節(jié)約請(qǐng)求資源。
* window觸發(fā)resize的時(shí)候，不斷的調(diào)整瀏覽器窗口大小會(huì)不斷的觸發(fā)這個(gè)事件，用防抖來讓其只觸發(fā)一次
*
* throttle(節(jié)流)
* 鼠標(biāo)不斷點(diǎn)擊觸發(fā)，mousedown(單位時(shí)間內(nèi)只觸發(fā)一次)
* 監(jiān)聽滾動(dòng)事件，比如是否滑到底部自動(dòng)加載更多，用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)
}
}
// 節(jié)流
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)
}
}
}
時(shí)間格式化處理
```javascript
// 格式化 startDate 和 endDate
import moment from ‘moment'
import _ from ‘lodash'
/**
@method timerByAdd 計(jì)算相對(duì)當(dāng)前時(shí)間后N個(gè)單位時(shí)間的日期(加法)
@param num {Number} 相對(duì)于幾個(gè)時(shí)間點(diǎn)
@param timer {String} 時(shí)間單位 ‘days' ‘months' ‘years‘ 更多時(shí)間單位參考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 計(jì)算相對(duì)當(dāng)前時(shí)間前N個(gè)單位時(shí)間的日期(減法)
@param num {Number} 相對(duì)于幾個(gè)時(shí)間點(diǎn)
@param timer {String} 時(shí)間單位 ‘days' ‘months' ‘years‘ 更多時(shí)間單位參考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 將對(duì)象時(shí)間轉(zhuǎn)成數(shù)組形式
@param {Object} timer {startDate, endDate}
*/
export function timerFormat (timer) {
if (
.isObject(timer)) {
return
.values(timer)
}
}
總結(jié)
以上所述是小編給大家介紹的Vue.js 中的實(shí)用工具方法,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的vue 懒人_Vue.js 中的实用工具方法【推荐】的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css怎样定义div大小,css如何设置
- 下一篇： 指针数组下标JAVA_C语言中下标与指针