v-explorer
A "file" explorer component for Vue.
How to:
Install
Yarn: yarn add v-explorer
NPM: npm i v-explorer --save
Use
JS
Vue; //for global usage el: '#app' data: files: options: { thisoptions; thisfiles = 1 "Folder 1" 10 'folder' ; thisfiles0dir = true; ; } methods: {} //handle context menu events {} //handle cancel events {} //handle rename events {} //handle drop events {} //handle move events ;
HTML
Will render something like this: You can see the whole code of this example in dist/index.html and assets/js/app.js.
Events
contextmenu
It will pass the selected file(s), if any, when a right click is executed.
select
It will pass the selected file when a left click is executed.
dragstart/dragend
It will pass the selected file when a file is dragged.
upload-canceled
It will pass the file that the upload has been canceled
file-rename
It will pass the file that has been renamed
drop
It will pass the file that has been dropped
move
It will pass the file that has been moved (after it's dropped)
dblclick
It will pass the file that has been double clicked
Props
files (required|array)
The files that are going to be displayed
Checkout the File class.
options (required|array)
The context menu options
Checkout the Option class.
width
The container's width (default: 100%|string)
height
The container's height (default: 100%|string)
root-drive
The root letter (default C:|string)
can-rename-files
Set if the user can rename the files (default: true|boolean)
You can also disable this options individually, checkout the Option class.
auto-resize-options
Explorer will try to resize the context menu options that don't fit will. It may have some unwanted behaviour so you can disable it by passing false to this option. (default: true|boolean)
Getters
In order to access some explorer data, you will need to import its store and get what you want like below:
Vue; //for global usage el: '#app' store computed: { //returns the current displayed folder return this$storegetterscurrentFolder; } { //return an array of the selected files return this$storegettersselectedFiles; }
Methods
You may also call some methods to change things on v-explorer. To do so, you will need to commit the action on the store.
Vue; //for global usage el: '#app' store methods: { //Open a folder from the current displayed folder this$store; }