摘要:項目中工具函數,我們通常會添加到的原型中,這樣就實現了全局函數只需要將綁定的這段引入到即可。對象中可以有兩個屬性和是布爾值,為真時,不會對獲取到的值進行解碼。參數可選,可以有以下屬性字符串字符串數值或日期對象布爾值。持續更新參考工具函數
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 ");"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) ");$1.length > 2 ");"u661fu671f" : "u5468") : "") + week[date.getDay() + ""])
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ");"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)("); + 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.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 ");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");
Vue.prototype.$getsearch = function (url) {
var obj = {} url.replace(/([^");
#小數截取固定位數
// 默認保留一位小數,并下舍入
$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
}
}
。。。持續更新
參考:vux工具函數
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/6871.html
摘要:案例持續觸發事件時,并不立即執行函數,當毫秒內沒有觸發事件時,才會延時觸發一次函數。也以函數形式暴露普通插槽。這樣的場景組件用函數式組件是非常方便的。相關閱讀函數式組件自定義指令前言 有echarts使用經驗的同學可能遇到過這樣的場景,在window.onresize事件回調里觸發echartsBox.resize()方法來達到重繪的目的,resize事件是連續觸發的這意味著echarts...
摘要:如何構建大型的前端項目搭建好項目的腳手架一般新開發一個項目時,我們會首先搭建好一個腳手架,然后才會開始寫代碼。組件化一般分為項目內的組件化和項目外的組件化。 如何構建大型的前端項目 1. 搭建好項目的腳手架 一般新開發一個項目時,我們會首先搭建好一個腳手架,然后才會開始寫代碼。一般腳手架都應當有以下的幾個功能: 自動化構建代碼,比如打包、壓縮、上傳等功能 本地開發與調試,并有熱替換與...
摘要:如何構建大型的前端項目搭建好項目的腳手架一般新開發一個項目時,我們會首先搭建好一個腳手架,然后才會開始寫代碼。組件化一般分為項目內的組件化和項目外的組件化。 如何構建大型的前端項目 1. 搭建好項目的腳手架 一般新開發一個項目時,我們會首先搭建好一個腳手架,然后才會開始寫代碼。一般腳手架都應當有以下的幾個功能: 自動化構建代碼,比如打包、壓縮、上傳等功能 本地開發與調試,并有熱替換與...
摘要:從到再到搭建編寫構建一個前端項目選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現成的項目模板自己搭建項目骨架。使用版本控制系統管理源代碼項目搭建好后,需要一個版本控制系統來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種:選擇現成的項目模板、自己搭建項目骨架。 ...
摘要:從到再到搭建編寫構建一個前端項目選擇現成的項目模板還是自己搭建項目骨架搭建一個前端項目的方式有兩種選擇現成的項目模板自己搭建項目骨架。使用版本控制系統管理源代碼項目搭建好后,需要一個版本控制系統來管理源代碼。 從 0 到 1 再到 100, 搭建、編寫、構建一個前端項目 1. 選擇現成的項目模板還是自己搭建項目骨架 搭建一個前端項目的方式有兩種:選擇現成的項目模板、自己搭建項目骨架。 ...
閱讀 3662·2021-11-24 09:38
閱讀 3150·2021-11-15 11:37
閱讀 787·2021-11-12 10:36
閱讀 3553·2021-10-21 09:38
閱讀 3223·2021-09-28 09:36
閱讀 2426·2021-09-22 16:01
閱讀 4999·2021-09-22 15:09
閱讀 1220·2019-08-30 15:55