vue 懒人_Vue.js 中的实用工具方法【推荐】
收集日常开发中常用到的一些工具方法, 包含 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 绑定的时间
* 使用方式
*/
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 中的实用工具方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
vue 懒人_Vue.js 中的实用工具方法【推荐】相关推荐
- vue滚动条禁止_vue.js中实现禁止浏览器滚动方法
大家好,本次在开发项目中,点击按钮,弹出一个自定义的弹出窗口和遮罩层,因为页面的超出一屏,有滚动条,但是想让弹出窗时候,禁止浏览器滚动,那么就简单写一个方法给大家. 思路是这样的,当弹窗弹出时候,让b ...
- methods vue 使用过滤器_Vue.js中过滤器(filter)的使用
Vue.js 过滤器的基本使用(filter) vue中的过滤器分为两种:局部过滤器和全局过滤器 1.定义无参全局过滤器 Vue.filter('msgFormat', function(msg) { ...
- vue族谱架构_vue.js中使用d3.js画家谱关系图
项目中需要做个家谱图,网上查了好多资料没找到合适的,就自己写个简单的,方便以后查看,附上效果图 首先展示父亲.配偶.子女,三代人信息,然后选择其他人可以展开他的三代关系.如下图 下面是代码,这个关系图 ...
- vue 动态路由_Vue.js应用性能优化三
在上一篇Vue.js应用性能优化二中,我们学习了足够强大的模式,可以显着提高应用程序的性能 - 按照路由分割代码.虽然按照路由拆分代码非常有用,但在用户访问我们的站点后,仍然有很多内部代码不需要.在本 ...
- 工作中常用,实用工具推荐!
原文:工作中常用,实用工具推荐! Red Gate 家族 大名鼎鼎的RedGate,相信大家都不会陌生,Reflector就是它家做的.这里就不介绍了.我本地安装的是09年下的一个套装,我介绍下常用的 ...
- JS中 new Date() 各方法的用法
JS中 new Date() 各方法的用法 1.new Date() 参数篇 a.返回类型为国标时间, b.无参数时可以直接返回输出时的时间, c.有参数时则返回对应时间的国标时间, d.日期中间的符 ...
- node/js 漏洞_6个可用于检查Node.js中漏洞的工具
node/js 漏洞 Vulnerabilities can exist in all products. The larger your software grows, the greater th ...
- js中match、replace方法中使用正则表达式
为什么80%的码农都做不了架构师?>>> js中match.replace方法中使用正则表达式 (2012-06-29 14:23:37) 转载▼ 标签: 字符串 飞雪 正则表 ...
- JS中令人发指的valueOf方法介绍
转载自 JS中令人发指的valueOf方法介绍 彭老湿近期月报里提到了valueOf方法,兴致来了翻了下ECMA5里关于valueOf方法的介绍,如下: 15.2.4.4 Object.protot ...
最新文章
- old DIB in res\*.ico
- 看了msn的站点有感
- 20172314 2018-2019-1《程序设计与数据结构》第四周学习总结
- 老表笔记之电商项目实战测试流程
- leetcode专题训练笔记
- HDU 2209 翻纸牌游戏
- CS224N笔记——RNN和语言模型
- Java游戏开发规则
- 如何编写一份合格的架构设计文档
- HTB打靶(Active Directory 101 Forest)
- 抖音神曲《一百万个可能》:“在一瞬间,我们有一百万个可能”
- Unity音频可视化
- 计算机基础知识教学反思,计算机基础课教学反思.doc
- windows10 热点一直显示正在断开中
- 使PC端网页宽度自适应手机屏幕大小
- 《Kubernetes证书篇:使用TLS bootstrapping简化kubelet证书制作》
- c语言确定原点建立坐标系,在GDI+中如何实现以左下角为原点的笛卡尔坐标系
- xtbalance 以后: 非平衡面板之转换
- 什么是 ImageX?
- java发票打印_java的发票打印CommPortIdentifier
热门文章
- 金融行业如何用大数据构建精准用户画像?
- IDEA解决Maven项目编译后classes文件中没有.xml或.properties问题
- 笔记:seafile 7.x 安装和部署摘要
- Maven:解决jar包冲突和企业开发常用编写
- 05.MyBtais两种取值符号以及输入参数和输出参数
- 解决设置了display:none的元素,会先展示再隐藏
- CentOS赋予一个普通用户root权限
- java.lang.UnsupportedClassVersionError: Bad version number in .class file异常
- 我的runtime学习笔记
- 数据结构——线性表的C语言实现