Pre-Caching Other Folders and Files for Faster Navigation Chapter 7viewer component
*/
Vue.component('folder', {
template: '<li><strong><a :href="\'#\' + f.path_lower">{{ f.name
}}</a></strong></li>',
props: {
f: Object,
cache: Function
},
created() {
// Cache the contents of the folder
this.cache(this.f.path_lower);
}
});Next, in line, we see the file component:
/**
* File component display size of file and download link
* @example <file :d="dropbox()" :f="entry"></file>
*
* @param {object} f The file entry from the tree
* @param {object} d The dropbox instance from the parent component
*/
Vue.component('file', {
template: '<li><strong>{{ f.name }}</strong><span v-if="f.size"> - {{
bytesToSize(f.size) }}</span> - <a v-if="link"
:href="link">Download</a></li>',
props: {
f: Object,
d: Object
},
data() {
return {
// List of file size
byteSizes: ['Bytes', 'KB', 'MB', 'GB', 'TB'],// The download link
link: false
}
},
methods: {
/**
* Convert an integer to a human readable file size
* @param {integer} bytes
* @return {string}
*/
bytesToSize(bytes) {