vue 使用lodash實現(xiàn)對象數(shù)組深拷貝操作
我就廢話不多說了,大家還是直接看代碼吧~
<template> <div></div> </template> <script> export default { mounted() { this.init(); }, methods: { init() { let lodash = require('lodash'); let obj1 = { a: 1, b: { f: { g: 1 } }, c: [1, 2, 3], h: () => { return 123; }, k: undefined }; let obj2 = lodash.cloneDeep(obj1); obj2.b.f.g = 2; obj2.c = [1, 2]; obj2.h = 1; console.log(obj1); console.log(obj2); } } }; </script>
如果本篇文章對你有幫助的話,很高興能夠幫助上你。
補充知識:vue iview上傳多文件只發(fā)送一次ajax請求,并根據(jù)上傳進(jìn)度顯示上傳進(jìn)度條
前言
基于iview的上傳組件(Upload)以及進(jìn)度條組件(Progress)
思路
使用Upload組件提供的上傳文件之前的鉤子,將所有上傳文件攔截下來,保存在本地臨時數(shù)組,使用axios來進(jìn)行上傳
完整示例
進(jìn)度條部分,請上傳一個大文件來查看效果
<template> <Form :model="formData" :label-width="80"> <FormItem class="upload" label="上傳文件"> <Upload :before-upload="handleUpload" :action="''" :multiple="true" > <Button icon="ios-cloud-upload-outline">請選擇附件</Button> </Upload> <!-- 進(jìn)度條 --> <Progress v-if="upload.fileProgressShow" :percent="upload.fileProgress" /> <!-- 顯示列表 --> <ul> <li v-for="(item, index) of formData.dispalyFile" :key="index" > <span>{{ item.name }}</span> <Icon type="md-close" @click="handleRemove(index)" /> </li> </ul> </FormItem> </Form> </template> <script> import axios from 'axios'; export default { data() { return { formData: { dispalyFile: [] // 臨時數(shù)組,同時用于顯示在頁面 }, // 上傳配置 upload: { look: true, // 控制多文件上傳,只觸發(fā)一次ajax請求 fileProgressShow: false, // 進(jìn)度條 fileProgress: 0 // 進(jìn)度條進(jìn)度 } }; }, methods: { handleUpload(selectFile) { // 臨時數(shù)組,同時用于顯示在頁面 this.formData.dispalyFile.push(selectFile) // 控制多文件上傳,只觸發(fā)一次ajax請求 if (this.upload.look) { this.upload.look = false; // 延遲請求,等待所有文件都從本地讀取完畢 setTimeout(() => { let formData = new FormData(); this.formData.dispalyFile.map(item => { // files為后臺接收參數(shù) // []為多文件數(shù)組 formData.append('files[]', item); }) axios.request({ url: '/upload', method: 'post', data: formData, headers: { 'Content-Type': 'multipart/form-data' }, onUploadProgress: (progressEvent) => { // 用于上傳過程中顯示進(jìn)度條 if (progressEvent.lengthComputable) { // 顯示進(jìn)度條 this.upload.fileProgressShow = true; // 計算當(dāng)前進(jìn)度 let curValue = (progressEvent.loaded / progressEvent.total * 100).toFixed(0); // 賦值給進(jìn)度條組件 this.upload.fileProgress = parseInt(curValue); } } }) .then(res => { // 上傳成功處理 // 隱藏進(jìn)度條 this.upload.fileProgressShow = false; }) .catch(() => { // 上傳失敗處理 // 隱藏進(jìn)度條 this.upload.fileProgressShow = false; }) }, 50); } return false; } } }; </script> <style scoped> .upload { width: 40%; } </style>
效果圖
上傳多文件,只進(jìn)行了一次ajax請求,這里xlz是一個超大壓縮包,用于展示進(jìn)度條效果, binary 為二進(jìn)制文件
如果本篇文章對你有幫助的話,很高興能夠幫助上你。希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
解讀element-ui使用el-upload,before-upload函數(shù)不好使的問題
這篇文章主要介紹了解讀element-ui使用el-upload,before-upload函數(shù)不好使的問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03vue.js中Vue-router 2.0基礎(chǔ)實踐教程
這篇文章主要給大家介紹了關(guān)于vue.js中Vue-router 2.0基礎(chǔ)實踐的相關(guān)資料,其中包括vue-router 2.0的基礎(chǔ)用法、動態(tài)路由匹配、嵌套路由、編程式路由、命名路由以及命名視圖等相關(guān)知識,需要的朋友可以參考借鑒,下面來一起看看吧。2017-05-05vue如何動態(tài)綁定img的src屬性(v-bind)
這篇文章主要介紹了vue如何動態(tài)綁定img的src屬性(v-bind),具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-04-04通過GASP讓vue實現(xiàn)動態(tài)效果實例代碼詳解
GASP是一個JavaScript動畫庫,它支持快速開發(fā)高性能的 Web 動畫。GASP 使我們能夠輕松輕松快速的將動畫串在一起,來創(chuàng)造一個高內(nèi)聚的流暢動畫序列。這篇文章主要介紹了通過GASP讓vue實現(xiàn)動態(tài)效果,需要的朋友可以參考下2019-11-11