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 输入框内容格式验证代码
Feb 11 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
Apr 01 Javascript
关于eval 与new Function 到底该选哪个?
Apr 17 Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
jQuery实现径向动画菜单效果
Jul 17 Javascript
javascript跨域总结之window.name实现的跨域数据传输
Nov 01 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
jQuery+css实现非常漂亮的水平导航菜单效果
Jul 27 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
微信小程序实现animation动画
Jan 26 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数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
ThinkPHP中数据操作案例分析
2015/09/27 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
window.ActiveXObject使用说明
2010/11/08 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
2016/10/15 Javascript
如何提高javascript加载速度
2016/12/26 Javascript
jQuery实现遍历复选框的方法示例
2017/03/06 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
JS关于刷新页面的相关总结
2018/05/09 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
微信小程序页面间跳转传参方式总结
2019/06/13 Javascript
[01:52]DOTA2完美大师赛Vega战队趣味视频——kpii老师小课堂
2017/11/25 DOTA
Python标准库os.path包、glob包使用实例
2014/11/25 Python
Python守护进程(daemon)代码实例
2015/03/06 Python
Python处理文本换行符实例代码
2018/02/03 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
pyqt5中动画的使用详解
2020/04/01 Python
解决python使用list()时总是报错的问题
2020/05/05 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
印度低票价航空公司:GoAir
2017/10/11 全球购物
Spartoo比利时:欧洲时尚购物网站
2017/12/06 全球购物
C#实现启动一个进程
2016/10/01 面试题
Prototype中如何为一个元素添加一个方法
2014/12/08 面试题
如何掌握自荐信格式呢
2013/11/19 职场文书
留学自荐信写作方法
2014/01/27 职场文书
yy生日主持词
2014/03/20 职场文书
节能减排倡议书
2014/04/15 职场文书
运动会加油稿30字
2015/07/21 职场文书
导游词之南昌滕王阁
2019/11/29 职场文书