Vue.js 中的实用工具方法【推荐】

收集日常开发中常用到的一些工具方法, 包含 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 绑定的时间
 * 使用方式 <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)
  }
 })
 }
})

实用方法

节流和防抖