欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue.js 中的實(shí)用工具方法【推薦】

 更新時(shí)間:2019年07月04日 14:06:01   作者:Coding and Fixing  
這篇文章主要介紹了Vue.js 中的實(shí)用工具方法,本文是小編日常開發(fā)中常用的一些工具方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

收集日常開發(fā)中常用到的一些工具方法, 包含 vue 的公用過濾器、公用指令等 (PS: 懶人養(yǎng)成記)

公用自定義過濾器

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 = [
  ['元', '萬', '億'],
  ['', '拾', '佰', '仟']
 ]

 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í),用防抖來節(jié)約請(qǐng)求資源。
 * window觸發(fā)resize的時(shí)候,不斷的調(diào)整瀏覽器窗口大小會(huì)不斷的觸發(fā)這個(gè)事件,用防抖來讓其只觸發(fā)一次
 *
 * throttle(節(jié)流)
 * 鼠標(biāo)不斷點(diǎn)擊觸發(fā),mousedown(單位時(shí)間內(nèi)只觸發(fā)一次)
 * 監(jiān)聽滾動(dòng)事件,比如是否滑到底部自動(dòng)加載更多,用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)
 }
}
// 節(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) 
} 
} 

總結(jié)

以上所述是小編給大家介紹的Vue.js 中的實(shí)用工具方法,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!

相關(guān)文章

  • vue.js將時(shí)間戳轉(zhuǎn)化為日期格式的實(shí)現(xiàn)代碼

    vue.js將時(shí)間戳轉(zhuǎn)化為日期格式的實(shí)現(xiàn)代碼

    這篇文章主要介紹了vue.js將時(shí)間戳轉(zhuǎn)化為日期格式的實(shí)現(xiàn)代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2018-06-06
  • 深入剖析vite到底是快還是慢原理詳解

    深入剖析vite到底是快還是慢原理詳解

    這篇文章主要為大家介紹了深入剖析vite到底是快還是慢原理詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • vue使用路由守衛(wèi)實(shí)現(xiàn)菜單的權(quán)限設(shè)置

    vue使用路由守衛(wèi)實(shí)現(xiàn)菜單的權(quán)限設(shè)置

    我們使?vue-element-admin前端框架開發(fā)后臺(tái)管理系統(tǒng)時(shí),?般都會(huì)涉及到菜單的權(quán)限控制問題,下面這篇文章主要給大家介紹了關(guān)于vue使用路由守衛(wèi)實(shí)現(xiàn)菜單的權(quán)限設(shè)置的相關(guān)資料,需要的朋友可以參考下
    2023-06-06
  • 專業(yè)級(jí)Vue?多級(jí)菜單設(shè)計(jì)

    專業(yè)級(jí)Vue?多級(jí)菜單設(shè)計(jì)

    這篇文章主要為大家介紹了專業(yè)級(jí)的Vue?多級(jí)菜單設(shè)計(jì)實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • 在Vue中實(shí)現(xiàn)文件預(yù)覽與打印的代碼示例

    在Vue中實(shí)現(xiàn)文件預(yù)覽與打印的代碼示例

    在Vue應(yīng)用中,有時(shí)我們需要實(shí)現(xiàn)文件預(yù)覽和打印的功能,比如,我們可能需要預(yù)覽并打印PDF文件、圖片文件等,本文將介紹如何在Vue中實(shí)現(xiàn)文件預(yù)覽和打印的功能,并提供相應(yīng)的代碼示例
    2023-06-06
  • 詳解為什么Vue中不要用index作為key(diff算法)

    詳解為什么Vue中不要用index作為key(diff算法)

    這篇文章主要介紹了詳解為什么Vue中不要用index作為key(diff算法),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • vue 項(xiàng)目中當(dāng)訪問路由不存在的時(shí)候默認(rèn)訪問404頁(yè)面操作

    vue 項(xiàng)目中當(dāng)訪問路由不存在的時(shí)候默認(rèn)訪問404頁(yè)面操作

    這篇文章主要介紹了vue 項(xiàng)目中當(dāng)訪問路由不存在的時(shí)候默認(rèn)訪問404頁(yè)面操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • Vue加入購(gòu)物車判斷token添加登錄提示功能

    Vue加入購(gòu)物車判斷token添加登錄提示功能

    加入購(gòu)物車,是一個(gè)登錄后的用戶 才能進(jìn)行的操作,所以需要進(jìn)行鑒權(quán)判斷,判斷用戶token是否存在,這篇文章主要介紹了Vue加入購(gòu)物車判斷token添加登錄提示,需要的朋友可以參考下
    2023-11-11
  • VUE前端打包到測(cè)試環(huán)境的解決方法

    VUE前端打包到測(cè)試環(huán)境的解決方法

    這篇文章主要介紹了若依VUE前端打包到測(cè)試環(huán)境,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-12-12
  • vue用vis插件如何實(shí)現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D

    vue用vis插件如何實(shí)現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D

    這篇文章主要介紹了vue用vis插件如何實(shí)現(xiàn)網(wǎng)絡(luò)拓?fù)鋱D,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10

最新評(píng)論