Vue.js 中的實用工具有哪些

這篇文章主要介紹了Vue.js 中的實用工具有哪些，億速云小編覺得不錯，現在分享給大家，也給大家做個參考，一起跟隨億速云小編來看看吧！

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

公用自定義過濾器

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 綁定的時間
 * 使用方式 <el-button v-prevent-replace-click></el-button>
 */
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 中的實用工具有哪些，如何覺得億速云網站的內容還不錯，歡迎將億速云網站推薦給身邊好友。