Vue.js 中的实用工具方法【推荐】
收集日常开发中常用到的一些工具方法,包含vue的公用过滤器、公用指令等(PS:懒人养成记)
公用自定义过滤器
importVuefrom'vue'
importmomentfrom'moment'
/**
*@filterdateFormat时间格式化
*@param{String,Date}value可被newDate解析的字符串
*@param{String}formatStrmoment的format字符串
*使用方法{{2019-1-1|dateFormat()}}
*/
Vue.filter('dateFormat',(value,formatStr)=>{
returnmoment(value).format(formatStr||'YYYY年MM月DD日hh:mm:ss')
})
/**
*@filterdigitUppercase人民币金额转成汉字大写
*@param{Number}value金额数字
*使用方法{{1111|digitUppercase}}
*/
Vue.filter('digitUppercase',(value)=>{
if(Number(value)){
letfraction=['角','分']
letdigit=[
'零','壹','贰','叁','肆',
'伍','陆','柒','捌','玖'
]
letunit=[
['元','万','亿'],
['','拾','佰','仟']
]
lethead=value<0?'欠':''
value=Math.abs(value)
lets=''
for(leti=0;i0;i++){
letp=''
for(letj=0;j0;j++){
p=digit[value%10]+unit[1][j]+p
value=Math.floor(value/10)
}
s=p.replace(/(零.)*零$/,'').replace(/^$/,'零')+unit[0][i]+s
}
returnhead+s.replace(/(零.)*零元/,'元')
.replace(/(零.)+/g,'零')
.replace(/^整$/,'零元整')
}else{
return'零元整'
}
})
公用自定义指令
importVuefrom'vue'
/**
*@directivepreventReClick防止按钮在短时间内多次点击造成的多次请求(一般用于提交按钮)
*@param{Element}el绑定的元素
*@param{Number}binding绑定的时间
*使用方式
*/
Vue.directive('preventReplaceClick',{
inserted(el,binding){
el.addEventListener('click',()=>{
if(!el.disabled){
el.classList.add('is-disabled')
consti=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来判断
*/
//防抖
exportfunctiondebounce(fn,delay=200){
lettimer
returnfunction(){
letth=this
letargs=arguments
if(timer){
clearTimeout(timer)
}
timer=setTimeout(function(){
timer=null
fn.apply(th,args)
},delay)
}
}
//节流
exportfunctionthrottle(fn,interval=200){
letlast
lettimer
returnfunction(){
letth=this
letargs=arguments
letnow=+newDate()
if(last&&now-last
时间格式化处理
```javascript
//格式化startDate和endDate
importmomentfrom‘moment'
import_from‘lodash'
/**
@methodtimerByAdd计算相对当前时间后N个单位时间的日期(加法)
@paramnum{Number}相对于几个时间点
@paramtimer{String}时间单位‘days'‘months'‘years‘更多时间单位参考moment官方文档
@paramformatStr{String}moment的format字符串
@return{Object}{startDate,endDate}
*/
exportfunctiontimerByAdd({
num,
timer=‘days'
}={},formatStr=‘YYYY-MM-DD'){
letstartDate
letendDate=moment().format(formatStr)
num?startDate=moment().add(num,timer).format(formatStr):startDate=endDate
letresult={
startDate,
endDate
}
returnresult
}
/**
@methodtimerBySubtract计算相对当前时间前N个单位时间的日期(减法)
@paramnum{Number}相对于几个时间点
@paramtimer{String}时间单位‘days'‘months'‘years‘更多时间单位参考moment官方文档
@paramformatStr{String}moment的format字符串
@return{Object}{startDate,endDate}
*/
exportfunctiontimerBySubtract({
num,
timer=‘days'
}={},formatStr=‘YYYY-MM-DD'){
letstartDate
letendDate=moment().format(formatStr)
num?startDate=moment().subtract(num,timer).format(formatStr):startDate=endDate
letresult={
startDate,
endDate
}
returnresult
}
/**
@methodtimerFormat将对象时间转成数组形式
@param{Object}timer{startDate,endDate}
*/
exportfunctiontimerFormat(timer){
if(
.isObject(timer)){
return
.values(timer)
}
}
总结
以上所述是小编给大家介绍的Vue.js中的实用工具方法,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！