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


Posted in Javascript onJuly 04, 2019

收集日常开发中常用到的一些工具方法, 包含 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 中的实用工具方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript编程起步(第六课)
Jan 10 Javascript
JavaScript中的事件处理
Jan 16 Javascript
JavaScript极简入门教程(二):对象和函数
Oct 25 Javascript
14个有用的Jquery技巧分享
Jan 08 Javascript
jquery实现向下滑出的二级导航下滑菜单效果
Aug 25 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
jQuery实现背景滑动菜单
Dec 02 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
Aug 31 Javascript
vscode下的vue文件格式化问题
Nov 28 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 Javascript
浅谈js中的attributes和Attribute的用法与区别
Jul 16 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
Jul 04 #Javascript
JS前端知识点总结之页面加载事件,数组操作,DOM节点操作,循环和分支
Jul 04 #Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 #Javascript
Vue 3.x+axios跨域方案的踩坑指南
Jul 04 #Javascript
Vue.js递归组件实现组织架构树和选人功能
Jul 04 #Javascript
vue-cli配置flexible过程详解
Jul 04 #Javascript
vue动态配置模板 'component is'代码
Jul 04 #Javascript
You might like
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
PHP制作万年历
2015/01/07 PHP
Nigma vs Liquid BO3 第二场2.13
2021/03/10 DOTA
两个DIV等高的JS的实现代码
2007/12/23 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
js字符串转成JSON
2013/11/07 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
jQuery模拟原生态App上拉刷新下拉加载更多页面及原理
2015/08/10 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
解决vue打包css文件中背景图片的路径问题
2018/09/03 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
Vue事件处理原理及过程详解
2020/03/11 Javascript
基于js实现数组相邻元素上移下移
2020/05/19 Javascript
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python实现的一个火车票转让信息采集器
2014/07/09 Python
Windows环境下python环境安装使用图文教程
2018/03/13 Python
Python使用gRPC传输协议教程
2018/10/16 Python
Python基础知识点 初识Python.md
2019/05/14 Python
python tornado使用流生成图片的例子
2019/11/18 Python
python进行二次方程式计算的实例讲解
2020/12/06 Python
捷克母婴用品购物网站:Feedo.cz
2020/12/28 全球购物
餐厅感恩节活动策划方案
2014/10/11 职场文书
乡镇党建工作汇报材料
2014/10/27 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
行政二审代理词
2015/05/25 职场文书
网吧温馨提示
2015/07/17 职场文书
vue中 this.$set的使用详解
2021/11/17 Vue.js
Python必备技巧之字符数据操作详解
2022/03/23 Python
Win11更新失败并提示0xc1900101
2022/04/19 数码科技