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

Folder edit, add, move, delete, download
File upload, download, preview, move
Similar to Windows file manager folder path search, history shortcuts
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 below`splic`Used 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 to`Parent path parent path current path`In 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 sequence`edit`.`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 occur`Object`At least you exist`The pathId field in parameter 7 props`Used to match in history); Table data after changes`Array`(Mainly used for manual update when new folder or custom upload is not the current path, [deletion will be handled automatically]); Whether to override updates`Boolean`(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 operation`Parameter 1`In the form of
3	table-column-top	Custom column, located in`Parameters of 6`Before is recommended`Parameters of 6`Dom can be customized by Formatter
4	table-column-bottom	Custom column, located in`Parameters of 6`Is recommended`Parameters of 6`Dom 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

Optimize preview components

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