Vue.js 中的实用工具方法

栏目: 编程语言 · 发布时间: 6年前

内容简介:收集日常开发中常用到的一些工具方法, 包含 vue 的公用过滤器、公用指令等 (PS: 懒人养成记)```javascript// 格式化 startDate 和 endDate

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

实用方法

节流和防抖

/**
  * 应用场景
  * 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 中的实用工具方法》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

复杂网络理论及其应用

复杂网络理论及其应用

汪小帆、李翔、陈关荣 / 清华大学出版社 / 2006 / 45.00元

国内首部复杂网络专著 【图书目录】 第1章 引论 1.1 引言 1.2 复杂网络研究简史 1.3 基本概念 1.4 本书内容简介 参考文献 第2章 网络拓扑基本模型及其性质 2.1 引言 2.2 规则网络 2.3 随机图 2.4 小世界网络模型 2.5 无标度网络模型 ......一起来看看 《复杂网络理论及其应用》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具