wl-explorer

Introduction to the

File manager plug-in for vUE framework, Cloud Disk. File manager plug-in for vue framework, cloud disk.

A file manager plug-in based on Vue and ElementUi that provides functionality similar to that of a cloud disk console.

This component is complex, and some Settings may be too close to the original project. It is recommended to use Clone project as control for the first time, and the Q group reply is more timely: 1058847321

Functions provided

  1. Folder edit, add, move, delete, download

  2. File upload, download, preview, move

  3. Similar to Windows file manager folder path search, history shortcuts

  4. Table mode, icon mode switch, etc

Online access

Start the

1. Clone the example project Gitclone[email protected]:hql7/wl-explorer.git 2. Download the dependency and run the sample project NPM install NPM Run Serve 3. Import wlExplorer from wl-Explorer NPM I wl-Explorer -s // main.js"wl-explorer"; ` import"wl-explorer/lib/wl-explorer.css"Vue.use(wlExplorer); 4. Run your project and refer to [email protected]: HQL7 /wl-explorerCopy the code

Another option

1. Clone the Wl-admin background management system template project Git that integrates the WL-Explorer componentclone[email protected]:hql7/wl-admin.git 2. Download the dependency and run the sample project NPM install NPM Run Serve 3. View the Sample NPM Install wlExplorer for mock data scenarios in the SRC /views/ UI/Explorer folderCopy the code

Quick learning

npm i wl-explorer -S

import wlExplorer from "wl-explorer"; ` import "wl-explorer/lib/wl-explorer.css" Vue.use(wlExplorer);Copy the code
   <wlExplorer
      ref="wl-explorer-cpt"
      :headerDropdown="headerHandle"
      :columns="file_table_columns"
      :all-path="all_folder_list"
      :is-folder-fn="isFolderFn"
      :folderType="rource_type"
      :data="file_table_data"
      :props="explorer_prop"
      @handleFolder="handleFolder"
      @search="fileSearch"
      @del="fileDel"
      @closeFade="closeOtherLayout(fade)"
    ></wlExplorer>
Copy the code
More content, as followsCopy the code

See making app. Vue

The document

Attributes

The serial number parameter instructions type The default value
1 headerDropdown Header more operations custom menu,item must include the fields: Name :String menu name, Command :Fn Menu instruction, optional fields Disabled :Boolean whether to disable, divided:Boolean whether to display dividing lines, icon:String icon Array –
2 showCheckbox Whether to display checkbox columns Boolean true
3 showIndex Whether to display ordinal columns Boolean true
4 showBorder Whether the table displays borders Boolean true
5 data Table data [currently only one-dimensional data is supported, each time the current folder data is passed in, but the component records and updates the folder history that has obtained the data, and does not rely too much on requests] Array –
6 columns File list header data Array Table- Column Attributes provided by all el-Table
7 props Configuration items Object See props below
8 allPath List of all file paths, used for fast access, move, upload, new Array –
9 isFolderFn Determine if the function(row) argument is the current row. The function should return a Boolean value Function –
10 isLockFn The function(row) argument is the current row data. The function should return a Boolean value Function –
11 useUpload Whether to use the built-in upload component (if you need to customize the upload component, you can write the DOM inside the component) Boolean true
12 uploadUrl File Upload Address String –
13 uploadReg Whether to verify uploaded files. If uploadRegFuc is enabled, use the uploadRegFuc function Boolean false
14 uploadHeaders Upload header Object –
15 uploadOptions Upload parameters Object –
16 uploadLimit Maximum uploads Number –
17 usePreview Whether to use the built-in preview component (if you need a custom preview component, you can write the DOM inside the component) Boolean true
18 previewType Preview file types,’ img’,’video’,’audio’,’iframe'(includes TXT, HTML, PDF) String img
19 previewOptions {sources: [{type: “video/mp4”, SRC: “}]} {sources: [{type: “video/mp4”, SRC: “}]} Object/String –
20 splicOptions {Splic: ‘Name’, Connector: ‘\’, // Connector; Id: “Id”, // The data source matches the field; Parents: “Parents”, // All parent nodes are separated by commas from top to bottom; IdentityId: “IdentityId”, // current increment id} Object { Splic: 'Name', Connector: '\\', Id: "Id", Parents: "Parents", IdentityId: "IdentityId", }

props

The serial number parameter instructions The default field Field value type
1 isFolder When there is a Boolean field indicating whether the data is of a folder type, this parameter is ignored when using the isFolderFn function isFolder Boolean
2 isLock Used when there is a Boolean field indicating whether the data is locked for the file type. When using isLockFn, this parameter is ignored isLock Boolean
3 name The field used to display the name column name String
4 suffix A field used to determine the suffix or to display a file type column suffix String
5 match Used to set the matching fields that the file path input box automatically completes, as shown belowsplicUsed when the field value is false name String
6 splic [Special Field] In the configuration item, only this parameter is the field value. All other parameters are fields key. That is, there must be an splic parameter in props to indicate whether to splice the pathname toParent path parent path current pathIn the form of Boolean true
7 pathName The field in the path data that represents the name name String
8 pathId Id field in the path data id String
9 pid The field of parentId in the path data pid String
10 pathChildren Represents the children field in the path data children String
11 pathDisabled Indicates a disabled field in the path data disabled String
12 size Set internal component size, same as elementUI medium String

Events

The serial number The name of the event instructions The callback parameter
1 handleFolder Folder adding or editing Function (act,type,file) indicates the current folder and type in sequenceedit.add, current path information
2 del delete Function (data) indicates the data to be deleted
3 search To get the data Function (path, true) Specifies the current path object and whether to update data (no need to indicate that historical data exists).
4 download Download a file or folder Function (data, cb) is the callback function for downloading the selected data in sequence. When using this function, set the interface to bloB format and put the return value with request header into CB (RES)
5 move mobile Function (to, data, load) is the target to be moved, the data to be moved, and the anti-shaking variable. Set load to true at the top of the time to prevent shaking and loading effect. When the request ends, manually set it to fasle
6 closeFade Close other pop-up boxes To prevent popup overwriting, close the other masked DOM on the external page when this function is received
7 showUpload Open the upload interface Do not use the built-in upload call
8 uploadBefore Callback before upload Function (file, path) is the object of the current path for uploading files. You can adjust the upload interface parameters in this function
9 upload Upload the event Function (data, cb) is the current path object in sequence. The callback must be performed. At latest, this function should adjust the upload parameters, and then call cb() to upload
10 uploadSuccess Upload successful callback When the interface returns the list row entity, the logic is automatically processed and the current data and historical data are updated. [Suggestion] If the data is not returned, the interface should be requested to update the data. However, if the upload path is not the current path, the historical data needs to be updated manually by calling the method
11 uploadError Upload failed callback Function (err) indicates error information in sequence
12 preview Preview event Function (data, cb) Indicates the selected data and opens the callback of the preview component in sequence. Call cb() to open the preview after updating preview parameters here

Form Methods

The method name instructions parameter
updateHistoryData Update historical data. The historical data is preferentially used when the plug-in has historical data. Therefore, if the historical data is not recorded in the current path and changes, you need to manually call add historical data The sequence of function(item, val, update) is: Information about the path where data changes occurObjectAt least you existThe pathId field in parameter 7 propsUsed to match in history); Table data after changesArray(Mainly used for manual update when new folder or custom upload is not the current path, [deletion will be handled automatically]); Whether to override updatesBoolean(Default to false, when false to execute the number combination, true to complete data overwrite)

Slot

The serial number name instructions
1 header-btn Header custom action button, positioned in front of more action button
2 header-dropdown The header contains more slots for operationParameter 1In the form of
3 table-column-top Custom column, located inParameters of 6Before is recommendedParameters of 6Dom can be customized by Formatter
4 table-column-bottom Custom column, located inParameters of 6Is recommendedParameters of 6Dom can be customized by Formatter
5 main In the list area under the operation bar of the path
6 – Anonymous slot, can write to any DOM module

Version of the record

0.1.6 Changing debounce to Throttle

0.1.5 Add the size parameter to manage the size of widgets in the component

0.1.4 Fixed the issue where the name field of icon mode was not configured using props

0.1.2 Fixed code that writes dead fields without using props; Fixed an issue where updateHistoryData manual update history function was missing

0.1.1 Error optimizing built-in preview component parameter defaults The document adds a description of the method; – Fixed the error of the main slot in the list area, and added a slot with name main in the list area;

This is the first release of the 0.1.0 WL-Explorer

0.0.1 This is the first release, but some functions are not decoupled

To be continued

  1. Optimize preview components