資訊專欄INFORMATION COLUMN
摘要：這個函數(shù)呢是自己在寫基于管理后臺時用到的，下面列出來兩種使用方式最普通的，封裝一個函數(shù)對象轉(zhuǎn)參數(shù)去掉為空的參數(shù)在組件化開發(fā)時，我是這樣寫的寫了一個工具文件，將其作為工具包引入的，并將其附給原型，這樣在每個組件中就可以使用來使用里面的一些工具
這個函數(shù)呢是自己在寫基于Vue+ElementUI管理后臺時用到的,，下面列出來兩種使用方式：
最普通的，封裝一個js函數(shù) /**
* 對象轉(zhuǎn)url參數(shù)
* @param {*} data
* @param {*} isPrefix
*/
queryParams (data, isPrefix) {
isPrefix = isPrefix ? isPrefix : false
let prefix = isPrefix ? "?" : ""
let _result = []
for (let key in data) {
let value = data[key]
// 去掉為空的參數(shù)
if (["", undefined, null].includes(value)) {
continue
}
if (value.constructor === Array) {
value.forEach(_value => {
_result.push(encodeURIComponent(key) + "[]=" + encodeURIComponent(_value))
})
} else {
_result.push(encodeURIComponent(key) + "=" + encodeURIComponent(value))
}
}
return _result.length ? prefix + _result.join("&") : ""
}
在Vue組件化開發(fā)時，我是這樣寫的
寫了一個工具文件utils.js，將其作為工具包引入Vue的main.js，并將其附給Vue原型，這樣在每個組件中就可以使用this.$utils來使用里面的一些工具函數(shù)了utils.js文件
const utils = {
/**
* 對象轉(zhuǎn)url參數(shù)
* @param {*} data
* @param {*} isPrefix
*/
queryParams (data, isPrefix = false) {
let prefix = isPrefix ? "?" : ""
let _result = []
for (let key in data) {
let value = data[key]
// 去掉為空的參數(shù)
if (["", undefined, null].includes(value)) {
continue
}
if (value.constructor === Array) {
value.forEach(_value => {
_result.push(encodeURIComponent(key) + "[]=" + encodeURIComponent(_value))
})
} else {
_result.push(encodeURIComponent(key) + "=" + encodeURIComponent(value))
}
}
return _result.length ? prefix + _result.join("&") : ""
},
// ....其他函數(shù)....
}
export default utils
main.js文件
import Vue from "vue" import App from "./App.vue" import utils from "@/utils/utils" // ...其他代碼... Vue.prototype.$utils = utils // ...其他代碼...在使用的時候可以這樣寫
// ....其他代碼 this.$utils.queryParams(this.params) // ...其他代碼...
如果有寫的不對或者不合適的地方請多多賜教，畢竟我還是個前端小菜雞，happy coding！
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/97814.html
摘要：在內(nèi)部還是調(diào)用這些方法。對象下標(biāo)，從開始對象下標(biāo)，從開始再次重申對象只能調(diào)用對象的，對象只能調(diào)用對象的對象轉(zhuǎn)成值得注意的是在腳本內(nèi)，是代表對象的。對象轉(zhuǎn)成對象語法也非常簡單在內(nèi)寫上對象，就變成了對象了。在文檔中對它的解釋是這樣子的。 什么是Jquery？ Jquey就是一款跨主流瀏覽器的JavaScript庫，簡化JavaScript對HTML操作 就是封裝了JavaScript，能夠...
摘要：在內(nèi)部還是調(diào)用這些方法。對象下標(biāo)，從開始對象下標(biāo)，從開始再次重申對象只能調(diào)用對象的，對象只能調(diào)用對象的對象轉(zhuǎn)成值得注意的是在腳本內(nèi)，是代表對象的。對象轉(zhuǎn)成對象語法也非常簡單在內(nèi)寫上對象，就變成了對象了。在文檔中對它的解釋是這樣子的。 什么是Jquery？ Jquey就是一款跨主流瀏覽器的JavaScript庫，簡化JavaScript對HTML操作 就是封裝了JavaScript，能夠...
摘要：需求就是那么簡單，在瀏覽器里裁剪圖片并上傳到服務(wù)器。原圖片對象上傳裁剪后的對象初始化圖片預(yù)覽根據(jù)裁剪參數(shù)繪制轉(zhuǎn)對象以下將對每個環(huán)節(jié)詳解。或者根據(jù)獲取裁剪信息包括旋轉(zhuǎn)和縮放用進(jìn)行手動繪制。 前言 圖片裁剪上傳，不僅是一個很貼合用戶體驗(yàn)的功能，還能夠統(tǒng)一特定圖片尺寸，優(yōu)化網(wǎng)站排版，一箭雙雕。 需求就是那么簡單，在瀏覽器里裁剪圖片并上傳到服務(wù)器。 我第一個想到的方法就是，將圖片和裁剪參數(shù)（x...
閱讀 3433·2023-04-25 18:14
閱讀 1526·2021-11-24 09:38
閱讀 3244·2021-09-22 14:59
閱讀 3060·2021-08-09 13:43
閱讀 2562·2019-08-30 15:54
閱讀 563·2019-08-30 13:06
閱讀 1540·2019-08-30 12:52
閱讀 2719·2019-08-30 11:13
