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 cookie操作类的实现代码小结附使用方法
Jun 02 Javascript
基于jQuery.Validate验证库知识点的详解
Apr 26 Javascript
javascript 实现键盘上下左右功能的小例子
Sep 15 Javascript
jQuery.lazyload+masonry改良图片瀑布流代码
Jun 20 Javascript
JavaScript获取某年某月的最后一天附截图
Jun 23 Javascript
基于Jquery实现表单验证
Jul 20 Javascript
JS把内容动态插入到DIV的实现方法
Jul 19 Javascript
详解打造 Vue.js 可复用组件
Mar 24 Javascript
vue .sync修饰符的使用详解
Jun 15 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
如何基于原生javaScript生成带图片的二维码
Nov 21 Javascript
js实现滑动进度条效果
Aug 21 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
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
PHP面向对象程序设计之对象生成方法详解
2016/12/02 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
javascript函数中参数传递问题示例探讨
2014/07/31 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
jQuery使用Layer弹出层插件闪退问题
2016/12/22 Javascript
Vuex之理解Getters的用法实例
2017/04/19 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
Python判断字符串是否xx开始或结尾的示例
2019/08/08 Python
Pytorch抽取网络层的Feature Map(Vgg)实例
2019/08/20 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
查找适用于matplotlib的中文字体名称与实际文件名对应关系的方法
2021/01/05 Python
美国现代家具和家居商店:Apt2B
2016/08/29 全球购物
如何开启linux的ssh服务
2015/02/14 面试题
《玩具柜台前的孩子》教学反思
2014/02/13 职场文书
安全目标管理责任书
2014/07/25 职场文书
公务员年度个人总结
2015/02/12 职场文书
结婚堵门保证书
2015/05/08 职场文书
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python