你好,节日快乐!
我需要有关如何从外部函数获取数据的建议,这些外部函数会在我的vuejs组件中生成一个zip文件,从而为JSZip插件创建进度条:https://stuk.github.io/jszip/documentation/api_jszip/generate_async.html
我导入我的文件: 从“ @ / utils / downloader.js”导入{generateZIP};
并通过按钮触发的方法在vuejs中调用它:
<template>
...
<div v-for="result of results" :key="result.item.refID">
<section class="row" @click="selectByRow(result.item)">
<input
type="checkbox"
:id="result.item.refID"
:value="result.item.refID"
v-model="checkedItems"
class="checkbox"
/>
</div>
<!-- FOUND RESULTS -->
<div class="name">{{ result.item.marketingName }}</div>
</section>
</div>
<!-- Download all checked items -->
<div>
<button
v-if="checkedItems.length > 1"
@click="downloadAll(checkedItems)"
class="button"
>
Download Selection
</button>
</template>
...
<script>
import { mapState, mapActions, mapMutations, mapGetters } from "vuex";
import { generateZIP } from "@/utils/downloader.js";
...
export default {
data() {
return {
// Path to point to pictures storage
domainName: this.$domainName,
// Array to gather search results
searchArray: [],
checkedItems: [],
// make a special array for row selection
checkedRow: []
};
},
methods:
downloadAll(files) {
// Prepare path
const fullPath = `${this.domainName}/files/${this.reqPath}/`;
const filesArray = [];
files.forEach(fileID => {
let obj = this.results.find(value => value.item.refID == fileID);
if (obj.item.images !== undefined) {
filesArray.push(obj.item.images);
}
});
generateZIP(filesArray.flat(), fullPath);
},
selectByRow(resultID) {
// Check if select resultID.refID is already in checkedItems and store it in variable if its present.
const isInArray = this.checkedItems.find(name => name === resultID.refID);
// if the ref not in array, add it
if (!isInArray) {
this.checkedItems.push(resultID.refID);
// Add checkedRow full information object
this.checkedRow.push(resultID);
} else {
// if already in array, remove it
this.checkedItems = this.checkedItems.filter(
name => name !== resultID.refID
);
this.checkedRow = this.checkedRow.filter(
name => name.refID !== resultID.refID
);
}
...
一切正常,现在我添加了一些显示zip进度的反馈。我将在downloader.js
中调用一个可用的回调函数“ updateCallback”zip.generateAsync({type:"blob"}, function updateCallback(metadata) {
console.log("progression: " + metadata.percent.toFixed(2) + " %");
if(metadata.currentFile) {
console.log("current file = " + metadata.currentFile);
}
})
...
export {
generateZIP
}
很酷,它会在我的控制台日志中显示进度。
但是我如何将这个元数据对象导入vue以便在我的应用程序中显示它?
非常感谢!
答案 0 :(得分:0)
在vue组件中使用数据属性。 在回调内部,将您的实例(this)链接到本地var,以在回调数据和反应性属性之间传递值。例如:let var = this