## Vue 專案中工具函式,我們通常會新增到Vue的原型中,這樣就實現了全域性函式
import Vue from 'vue'
Vue.prototype.$tools = function (){}複製程式碼
只需要將繫結的這段js引入到main.js即可。繫結方法十分簡單,這裡不再詳細說明
下面列舉幾個常用的工具函式
# $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,預設為2
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])
獲取 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
複製程式碼
。。。持續更新
參考:vux工具函式