您好,登錄后才能下訂單哦!
這篇文章主要介紹了Vue.js 中的實(shí)用工具有哪些,億速云小編覺(jué)得不錯(cuò),現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨億速云小編來(lái)看看吧!
Vue是一款友好的、多用途且高性能的JavaScript框架,使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù),Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件,每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript,以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方,所以越來(lái)越多的前端開發(fā)者使用vue。
公用自定義過(guò)濾器
import Vue from 'vue' import moment from 'moment' /** * @filter dateFormat 時(shí)間格式化 * @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 人民幣金額轉(zhuǎn)成漢字大寫 * @param {Number} value 金額數(shù)字 * 使用方法 {{ 1111 | digitUppercase }} */ Vue.filter('digitUppercase', (value) => { if (Number(value)) { let fraction = ['角', '分'] let digit = [ '零', '壹', '貳', '叁', '肆', '伍', '陸', '柒', '捌', '玖' ] let unit = [ ['元', '萬(wàn)', '億'], ['', '拾', '佰', '仟'] ] 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 防止按鈕在短時(shí)間內(nèi)多次點(diǎn)擊造成的多次請(qǐng)求(一般用于提交按鈕) * @param {Element} el 綁定的元素 * @param {Number} binding 綁定的時(shí)間 * 使用方式 <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) } }) } })
實(shí)用方法
節(jié)流和防抖
/** * 應(yīng)用場(chǎng)景 * debounce(抖動(dòng)) * search搜索聯(lián)想,用戶在不斷輸入值時(shí),用防抖來(lái)節(jié)約請(qǐng)求資源。 * window觸發(fā)resize的時(shí)候,不斷的調(diào)整瀏覽器窗口大小會(huì)不斷的觸發(fā)這個(gè)事件,用防抖來(lái)讓其只觸發(fā)一次 * * throttle(節(jié)流) * 鼠標(biāo)不斷點(diǎn)擊觸發(fā),mousedown(單位時(shí)間內(nèi)只觸發(fā)一次) * 監(jiān)聽滾動(dòng)事件,比如是否滑到底部自動(dòng)加載更多,用throttle來(lái)判斷 */ // 防抖 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) } } // 節(jié)流 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) } } }
時(shí)間格式化處理
```javascript // 格式化 startDate 和 endDate import moment from ‘moment' import _ from ‘lodash' /** @method timerByAdd 計(jì)算相對(duì)當(dāng)前時(shí)間后N個(gè)單位時(shí)間的日期(加法) @param num {Number} 相對(duì)于幾個(gè)時(shí)間點(diǎn) @param timer {String} 時(shí)間單位 ‘days' ‘months' ‘years‘ 更多時(shí)間單位參考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 計(jì)算相對(duì)當(dāng)前時(shí)間前N個(gè)單位時(shí)間的日期(減法) @param num {Number} 相對(duì)于幾個(gè)時(shí)間點(diǎn) @param timer {String} 時(shí)間單位 ‘days' ‘months' ‘years‘ 更多時(shí)間單位參考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 將對(duì)象時(shí)間轉(zhuǎn)成數(shù)組形式 @param {Object} timer {startDate, endDate} */ export function timerFormat (timer) { if ( .isObject(timer)) { return .values(timer) } }
以上就是億速云小編為大家收集整理的Vue.js 中的實(shí)用工具有哪些,如何覺(jué)得億速云網(wǎng)站的內(nèi)容還不錯(cuò),歡迎將億速云網(wǎng)站推薦給身邊好友。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。