Vue.js 中的实用工具有哪些

这篇文章主要介绍了Vue.js 中的实用工具有哪些，恰卡编程网小编觉得不错，现在分享给大家，也给大家做个参考，一起跟随恰卡编程网小编来看看吧！

为什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以创建可维护性和可测试性更强的代码库，Vue允许可以将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JavaScript，以用来渲染网页中相应的地方，所以越来越多的前端开发者使用vue。

公用自定义过滤器

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;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(leti=0;i<unit[0].length&&value>0;i++){
letp=''
for(letj=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
}
returnhead+s.replace(/(零.)*零元/,'元')
.replace(/(零.)+/g,'零')
.replace(/^整$/,'零元整')
}else{
return'零元整'
}
})

公用自定义指令

importVuefrom'vue'
/**
*@directivepreventReClick防止按钮在短时间内多次点击造成的多次请求(一般用于提交按钮)
*@param{Element}el绑定的元素
*@param{Number}binding绑定的时间
*使用方式<el-buttonv-prevent-replace-click></el-button>
*/
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<interval){
clearTimeout(timer)
timer=setTimeout(function(){
last=now
fn.apply(th,args)
},interval)
}else{
last=now
fn.apply(th,args)
}
}
}

时间格式化处理

```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 中的实用工具有哪些，如何觉得恰卡编程网网站的内容还不错，欢迎将恰卡编程网网站推荐给身边好友。