Vue.js 中的实用工具方法【推荐】
(编辑:jimmy 日期: 2024/11/28 浏览:3 次 )
收集日常开发中常用到的一些工具方法, 包含 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 "color: #ff0000">公用自定义指令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 "color: #ff0000">总结以上所述是小编给大家介绍的Vue.js 中的实用工具方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
下一篇:vue引入微信sdk 实现分享朋友圈获取地理位置功能
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。