vue 工具函數封裝,持續更新。。。

Vue 項目中工具函數,咱們一般會添加到Vue的原型中,這樣就實現了全局函數

import Vue from 'vue'
Vue.prototype.$tools = function (){}
複製代碼

只須要將綁定的這段js引入到main.js便可。綁定方法十分簡單,這裏再也不詳細說明vue

下面列舉幾個經常使用的工具函數ios

$dateFormat 事件格式化函數,相對於moment輕不少

Vue.prototype.$dateFormat = function (date, fmt = 'YYYY-MM-DD HH:mm:ss') {
  if (!date) {
    return ''
  }
  if (typeof date === 'string') {
    date = new Date(date.replace(/-/g, '/'))
  }
  if (typeof date === 'number') {
    date = new Date(date)
  }
  var o = {
    'M+': date.getMonth() + 1,
    'D+': date.getDate(),
    'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12,
    'H+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds(),
    'q+': Math.floor((date.getMonth() + 3) / 3),
    'S': date.getMilliseconds()
  }
  var week = {
    '0': '\u65e5',
    '1': '\u4e00',
    '2': '\u4e8c',
    '3': '\u4e09',
    '4': '\u56db',
    '5': '\u4e94',
    '6': '\u516d'
  }
  if (/(Y+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  if (/(E+)/.test(fmt)) {
    fmt = fmt.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? '\u661f\u671f' : '\u5468') : '') + week[date.getDay() + ''])
  }
  for (var k in o) {
    if (new RegExp('(' + k + ')').test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
    }
  }
  return fmt
}
複製代碼

$ajax

import axios from 'axios'
// 跨域請求,容許保存cookieaxios.defaults.withCredentials = true
// HTTPrequest攔截,對發出的請求數據進行統一操做
axios.interceptors.request.use(config => {
  // 對請求參數作些什麼
  return config
}, error => {
  // 對請求錯誤作些什麼
  console.log('err' + error) // for debug
  return Promise.reject(error)
})
// HTTPresponse攔截,對收到的數據進行統一操做
axios.interceptors.response.use(data => {
  // 對返回數據進行操做
  return data
}, error => {
  return Promise.reject(new Error(error))
})
Vue.prototype.$ajax = function ajax (url = '', data = {}, type = 'GET') {
    type = type.toUpperCase()
  return new Promise(function (resolve, reject) {
    let promise
    if (type === 'GET') {
      let dataStr = '' // 數據拼接字符串
      Object.keys(data).forEach(key => {
        dataStr += key + '=' + data[key] + '&'
      })
      if (dataStr !== '') {
        dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'))
        url = url + '?' + dataStr
      }
      // 發送get請求
      promise = axios.get(url)
    } else {
    //  發送post
      promise = axios.post(url, data)
    }
    promise.then(response => {
      resolve(response.data)
    }).catch(error => {
      reject(error)
    })
  })
}
複製代碼

數字格式化

numberComma用於分割數字,默認爲3位分割,通常用於格式化金額。
複製代碼
Vue.prototype.$numberComma = function (source, length = 3) {
  source = String(source).split('.')
  source[0] = source[0].replace(new RegExp('(\\d)(?=(\\d{' + length + '})+$)', 'ig'), '$1,')
  return source.join('.')
}
複製代碼

數字補位

numberPad用於按照位數補0,默認爲2ajax

Vue.prototype.$numberPad = function (source, length = 2) {
  let pre = ''
  const negative = source < 0
  const string = String(Math.abs(source))
  if (string.length < length) {
    pre = (new Array(length - string.length + 1)).join('0')
  }
  return (negative ? '-' : '') + pre + string
}
複製代碼

取隨機數字

Vue.prototype.$numberRandom = function (min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}
複製代碼

cookie操做

1.$cookie.get(name, [options])axios

獲取 cookie 值。options 參數可選,取值以下: converter 轉換函數。若是所獲取的 cookie 有值,會在返回前傳給 converter 函數進行轉換。 選項對象。對象中能夠有兩個屬性:converter 和 raw. raw 是布爾值,爲真時,不會對獲取到的 cookie 值進行 URI 解碼。 注:若是要獲取的 cookie 鍵值不存在,則返回 undefined. 2.cookie.set(name, value, [options])
  設置 cookie 值。參數 options 可選,能夠有如下屬性:path(字符串)、domain(字符串)、
  expires(數值或日期對象)、raw(布爾值)。當 raw 爲真值時,在設置 cookie 值時,不會進行
  URI 編碼。
3.cookie.remove(name, [options]) 移除指定的 cookie.跨域

const Cookie = {}
var decode = decodeURIComponent
var encode = encodeURIComponent
Cookie.get = function (name, options) {
  validateCookieName(name)
  if (typeof options === 'function') {
    options = {
      converter: options
    }
  } else {
    options = options || {}
  }
  var cookies = parseCookieString(document.cookie, !options['raw'])
  return (options.converter || same)(cookies[name])
}
Cookie.set = function (name, value, options) {
  validateCookieName(name)

  options = options || {}
  var expires = options['expires']
  var domain = options['domain']
  var path = options['path']

  if (!options['raw']) {
    value = encode(String(value))
  }
  var text = name + '=' + value

  // expires
  var date = expires
  if (typeof date === 'number') {
    date = new Date()
    date.setDate(date.getDate() + expires)
  }
  if (date instanceof Date) {
    text += ' expires=' + date.toUTCString()
  }
  // domain
  if (isNonEmptyString(domain)) {
    text += ' domain=' + domain
  }
  // path
  if (isNonEmptyString(path)) {
    text += ' path=' + path
  }
  // secure
  if (options['secure']) {
    text += ' secure'
  }
  document.cookie = text
  return text
}
Cookie.remove = function (name, options) {
  options = options || {}
  options['expires'] = new Date(0)
  return this.set(name, '', options)
}
function parseCookieString (text, shouldDecode) {
  var cookies = {}
  if (isString(text) && text.length > 0) {
    var decodeValue = shouldDecode ? decode : same
    var cookieParts = text.split(/\s/g)
    var cookieName
    var cookieValue
    var cookieNameValue
    for (var i = 0, len = cookieParts.length; i < len; i++) {
      cookieNameValue = cookieParts[i].match(/([^=]+)=/i)
      if (cookieNameValue instanceof Array) {
        try {
          cookieName = decode(cookieNameValue[1])
          cookieValue = decodeValue(cookieParts[i]
            .substring(cookieNameValue[1].length + 1))
        } catch (ex) {
          console.log(ex)
        }
      } else {
        cookieName = decode(cookieParts[i])
        cookieValue = ''
      }
      if (cookieName) {
        cookies[cookieName] = cookieValue
      }
    }
  }
  return cookies
}
function isString (o) {
  return typeof o === 'string'
}
function isNonEmptyString (s) {
  return isString(s) && s !== ''
}
function validateCookieName (name) {
  if (!isNonEmptyString(name)) {
    throw new TypeError('Cookie name must be a non-empty string')
  }
}
function same (s) {
  return s
}
Vue.prototype.$cookie = Cookie
複製代碼

獲取URL中的請求參數

```
  $dateFormat(url) 返回搜索參數的鍵值對對象
  例: getsearch('http://www.longfor.com?usercode=shen&token=TKpRmNelonghu')
  // { usercode: 'shen',
       token: 'TKpRmNelonghu' }
複製代碼
複製代碼
Vue.prototype.$getsearch = function (url) {
複製代碼

var obj = {} url.replace(/([^?&=]+)=([^&#]+)/g, (_, k, v) => { obj[k] = v }) return obj }promise

#小數截取固定位數
// 默認保留一位小數,並下舍入
      $decimalNum 截取固定位數的小數
      /**@param
      number 處理的小數
      number 保留的小數位數
      number 0 對小數進行下舍入;1 四捨五入;2 上舍入
      */
      例: $decimalNum(2.376186679,3,)
      // 2.376
複製代碼
Vue.prototype.$decimalNum = function (source, length = 1, type = 0) {
    length = Math.pow(10, length)
    if (type === 2) {
      return Math.ceil(source * length) / length
    } else if (type === 1) {
      return Math.round(source * length) / length
    } else {
      return Math.floor(source * length) / length
    }
  }
複製代碼

。。。持續更新bash

參考:vux工具函數cookie

相關文章
相關標籤/搜索