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中substr,substring,slice.splice的区别说明
Nov 25 Javascript
原生js实现跨浏览器获取鼠标按键的值
Apr 08 Javascript
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Dec 29 Javascript
DIV始终居中的js代码
Feb 17 Javascript
JS 弹出层 定位至屏幕居中示例
May 21 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
JavaScript解析JSON格式数据的方法示例
Jan 24 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
Apr 04 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
May 21 Javascript
JavaScript实现身份证验证代码实例
Aug 26 Javascript
JavaScript定时器使用方法详解
Mar 26 Javascript
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
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的ASP防火墙
2006/10/09 PHP
用穿越火线快速入门php面向对象
2012/02/22 PHP
深入php中var_dump方法的使用详解
2013/06/24 PHP
php分页示例分享
2014/04/30 PHP
PHP Reflection API详解
2015/05/12 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
jQuery中eq()方法用法实例
2015/01/05 Javascript
JavaScript跨平台的开源框架NativeScript
2015/03/24 Javascript
javascript运动详解
2015/07/06 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
2017/03/10 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
详解使用React进行组件库开发
2018/02/06 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
Node.js中出现未捕获异常的处理方法
2020/06/29 Javascript
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
PyQt5每天必学之单行文本框
2018/04/19 Python
tensorflow 中对数组元素的操作方法
2018/07/27 Python
python在OpenCV里实现投影变换效果
2019/08/30 Python
Python操作Jira库常用方法解析
2020/04/10 Python
python中pow函数用法及功能说明
2020/12/04 Python
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
家居设计专业个人自荐信范文
2013/11/26 职场文书
营销专业应届生求职信
2013/11/26 职场文书
音乐器材管理制度
2014/01/31 职场文书
关爱女孩行动实施方案
2014/03/13 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
宿舍管理制度范本
2015/08/07 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
李白经典诗之一:全文无一“月”字,却句句有月
2019/07/12 职场文书
使用react-virtualized实现图片动态高度长列表的问题
2021/05/28 Javascript