wl-explorer
Введение
Плагин файлового менеджера для vue framework, облачный диск. Плагин файлового менеджера для vue framework, облачный диск.
Плагин файлового менеджера на основе Vue и ElementUi, который предоставляет функции, аналогичные консоли облачного диска.
Этот компонент более сложный, и некоторые настройки могут быть слишком близки к исходному проекту. Рекомендуется использовать проект клонирования в первый раз в качестве сравнения, а ответ группы q более своевременен: 1058847321.
Предоставляемые функции
-
Редактирование папки, добавление, перемещение, удаление, загрузка
-
Загрузка файла, загрузка, предварительный просмотр, перемещение
-
Поиск пути к папке, аналогичный файловому менеджеру Windows, горячие клавиши истории
-
Режим таблицы, переключение режима значков и т. д.
онлайн-доступ
запускать
1. 克隆示例项目
git clone git@github.com:hql7/wl-explorer.git
2. 下载依赖并运行示例项目
npm install
npm run serve
3. 在你的项目上引入wl-explorer
npm i wl-explorer -S
// main.js中
import wlExplorer from "wl-explorer";`
import "wl-explorer/lib/wl-explorer.css"
Vue.use(wlExplorer);
4. 运行你的项目，并对照git@github.com:hql7/wl-explorer.git项目示例
другой вариант
1. 克隆集成了wl-explorer组件的wl-admin后台管理系统模板项目
git clone git@github.com:hql7/wl-admin.git
2. 下载依赖并运行示例项目
npm install
npm run serve
3. 在src/views/ui/explorer文件夹下查看mock数据方案的npm install wlExplorer 示例
Начать быстро
npm i wl-explorer -S
import wlExplorer from "wl-explorer";`
import "wl-explorer/lib/wl-explorer.css"
Vue.use(wlExplorer);
<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>
内容较多，如下
см. гитхабapp.vue
Документация
Attributes
| серийный номер | параметр | иллюстрировать | Типы | По умолчанию |
|---|---|---|---|---|
| 1 | headerDropdown | Дополнительные операции в голове для настройки меню, элемент должен включать поля: имя: имя строки меню, команда: Fn эта команда меню, необязательное поле отключено: отключено ли логическое значение, разделено: отображается ли логическое значение разделительной линии, значок: значок строки | Array | - |
| 2 | showCheckbox | Показывать ли столбец флажка | Boolean | true |
| 3 | showIndex | Показывать ли столбец серийного номера | Boolean | true |
| 4 | showBorder | Показывает ли таблица границу | Boolean | true |
| 5 | data | Данные списка [в настоящее время поддерживаются только одномерные данные, каждый раз, когда данные текущей папки передаются, но компонент будет записывать и обновлять историю папок полученных данных и не слишком полагаться на запрос] | Array | - |
| 6 | columns | данные заголовка списка файлов | Array | Все атрибуты таблицы-столбца, предоставленные el-table |
| 7 | props | элемент конфигурации | Object | Смотрите реквизит ниже |
| 8 | allPath | Список всех путей к файлам для быстрого доступа, перемещения, загрузки, создания | Array | - |
| 9 | isFolderFn | Определите, является ли параметр function(row) функции папки текущими данными строки, функция должна возвращать логическое значение. | Function | - |
| 10 | isLockFn | Определите, блокировать ли параметр функции (строки) функции папки текущие данные строки, функция должна возвращать логическое значение | Function | - |
| 11 | useUpload | Использовать ли встроенный компонент загрузки [Если вам нужно настроить компонент загрузки, вы можете написать dom внутри компонента. Анонимный соль] | Boolean | true |
| 12 | uploadUrl | Загрузить адрес файла | String | - |
| 13 | uploadReg | Чтобы проверить загруженный файл, вам нужно использовать функцию uploadRegFuc, чтобы включить его | Boolean | false |
| 14 | uploadHeaders | Загрузить информацию заголовка | Object | - |
| 15 | uploadOptions | Загрузить параметры | Object | - |
| 16 | uploadLimit | Максимальное количество загрузок | Number | - |
| 17 | usePreview | Использовать ли встроенный компонент предварительного просмотра [Если вам нужно настроить компонент предварительного просмотра, вы можете написать dom внутри компонента. Анонимный соль] | Boolean | true |
| 18 | previewType | Тип файла предварительного просмотра, «img», «видео», «аудио», «iframe» (включая txt, html, pdf) | String | img |
| 19 | previewOptions | Адрес предварительного просмотра файла или элемент конфигурации, кроме видео, требуется только адрес файла. Для видео см. элемент конфигурации video.js {sources: [{type: "video/mp4",src: ''}]} | Object/String | - |
| 20 | splicOptions | Элемент конфигурации пути сращивания, {Splic: 'Name', Connector: '\', // Connector; Id: "Id", // Поле соответствия источника данных; Parents: "Parents", // Все родительские узлы автоматически увеличивают идентификатор Запятая разделена сверху вниз; IdentityId: "IdentityId", // текущий идентификатор автоинкремента} | Object | { Splic: 'Name', Connector: '\\', Id: "Id", Parents: "Parents", IdentityId: "IdentityId", } |
props
| серийный номер | параметр | иллюстрировать | поле по умолчанию | Тип значения поля |
|---|---|---|---|---|
| 1 | isFolder | Он используется при наличии логического поля, указывающего, относятся ли данные к типу папки.При использовании функции isFolderFn этот параметр будет игнорироваться. | isFolder | Boolean |
| 2 | isLock | Он используется при наличии логического поля, указывающего, привязаны ли данные к типу файла.При использовании функции isLockFn этот параметр игнорируется. | isLock | Boolean |
| 3 | name | Поле для отображения столбца имени | name | String |
| 4 | suffix | Поле, используемое для определения суффикса или отображения столбца типа файла | suffix | String |
| 5 | match | Поле соответствия, используемое для установки автоматического завершения поля ввода пути к файлу, как показано ниже.splicИспользуйте, когда значение поля ложно |
name | String |
| 6 | splic | [Специальное поле] Только этот параметр в пункте конфигурации является значением поля, остальные - ключом поля, то есть в реквизите должен быть параметр splice, чтобы указать, нужно ли склейку имени пути как父路径\父路径\当前路径форма |
Boolean | true |
| 7 | pathName | Поля в данных пути, представляющие имена | name | String |
| 8 | pathId | Указывает поле id в данных пути | id | String |
| 9 | pid | Поле, представляющее parentId в данных пути | pid | String |
| 10 | pathChildren | Детское поле указывает на путь данных | children | String |
| 11 | pathDisabled | Указывает отключенные поля в данных пути | disabled | String |
| 12 | size | Установите внутренний размер компонента, такой же, как у elementui | medium | String |
Events
| серийный номер | название события | иллюстрировать | параметр обратного вызова |
|---|---|---|---|
| 1 | handleFolder | Папки добавляются или редактируются | function(act,type,file) — текущая выбранная папка, введите по очередиedit,add, информация о текущем пути |
| 2 | del | удалять | функция (данные) - это данные, которые должны быть удалены в свою очередь |
| 3 | search | получить данные | function(path, true) — это текущий объект пути, в свою очередь, нужно ли обновлять данные (нет необходимости указывать наличие исторических данных) |
| 4 | download | Скачать файл или папку | function(data, cb) — это выбранные данные по очереди и функция обратного вызова загрузки после успешного запроса.При ее использовании установите интерфейс в формат blob и поместите возвращаемое значение с заголовком запроса в cb(res) |
| 5 | move | переехать | function(to, data, load) — это движущаяся цель, данные, которые нужно переместить, и переменная защиты от сотрясений. Установите для load значение true в верхней части времени, чтобы добиться эффекта защиты от сотрясения + загрузки, и вам необходимо вручную установить для него значение fasle в конце запроса. |
| 6 | closeFade | Закрыть другие всплывающие окна | Чтобы предотвратить перезапись поповера, другие маскирующие домы на внешней странице должны быть закрыты при получении этой функции. |
| 7 | showUpload | Открыть интерфейс загрузки | Вызывается, когда не используется встроенный загрузчик |
| 8 | uploadBefore | Обратный звонок перед загрузкой | function(file, path) — это загруженный файл и текущий объект пути по очереди. Вы можете настроить параметры интерфейса загрузки в этой функции. |
| 9 | upload | загрузить событие | function(data, cb) - это текущий объект пути, в свою очередь, должен быть выполнен обратный вызов загрузки, самое позднее параметры загрузки должны быть скорректированы в этой функции, а затем cb() вызывается для загрузки |
| 10 | uploadSuccess | Обратный вызов успешной загрузки | function(res) по очереди возвращает данные для интерфейса. Когда интерфейс возвращает объект строки списка, он автоматически обрабатывает логику и обновляет текущие данные и исторические данные [Предложение]. Если данные не возвращаются, интерфейс должен быть запрашивается обновление данных, но при загрузке Если путь не является текущим путем, исторические данные необходимо обновить вручную, вызвав метод |
| 11 | uploadError | Загрузить неудавшийся обратный вызов | function(err) - это сообщение об ошибке, в свою очередь |
| 12 | preview | Предварительный просмотр события | function(data, cb) — это текущие выбранные данные предварительного просмотра и обратный вызов для открытия компонента предварительного просмотра по очереди.Вы должны вызвать cb(), чтобы открыть предварительный просмотр после обновления параметров предварительного просмотра здесь. |
Form Methods
| имя метода | иллюстрировать | параметр |
|---|---|---|
| updateHistoryData | Обновите исторические данные. Когда у плагина есть история, исторические данные будут использоваться в первую очередь. Поэтому, если исторические данные уже записаны в нетекущий путь и данные меняются, вам нужно вручную вызвать надстройку | function(item, val, update) по порядку: информация о пути, где произошли изменения данныхObject(По крайней мере, вы существуете参数7 props里的pathId字段для сопоставления в истории); изменены данные спискаArray(в основном используется для ручного обновления, когда при добавлении новой папки или пользовательской загрузке выбран не текущий путь, [удаление будет обработано автоматически]); следует ли перезаписать обновлениеBoolean(по умолчанию false, когда false, выполняется объединение массивов, когда true — полное покрытие данных) |
Slot
| серийный номер | name | иллюстрировать |
|---|---|---|
| 1 | header-btn | Кнопка пользовательского действия в голове, расположенная перед дополнительными кнопками действий. |
| 2 | header-dropdown | Больше рабочих слотов в голове, рекомендуется использовать参数1форма |
| 3 | table-column-top | пользовательский столбец, в参数6ранее рекомендуется использовать参数6В виде форматера можно настроить dom |
| 4 | table-column-bottom | пользовательский столбец, в参数6После этого рекомендуется использовать参数6В виде форматера можно настроить dom |
| 5 | main | Область списка под панелью операций пути |
| 6 | - | Анонимный слот, вы можете написать любой модуль dom |
Запись версии
0.1.6 Изменить debounce на дроссель
0.1.5 Увеличьте параметр размера для управления размером виджетов в компоненте
0.1.4 Исправлен режим значка, ошибка, связанная с тем, что поле имени не настроено с помощью реквизита
0.1.2 Исправлен код некоторых полей, которые пишутся не по настройке props, исправлена проблема с отсутствием функции ручного обновления истории updateHistoryData
0.1.1 Оптимизирована ошибка по умолчанию параметров встроенного компонента предварительного просмотра, увеличена документация
方法Описание; оптимизируйте ошибку основного слота в области списка и увеличьте имя в области списка по мереmainслот;
0.1.0 Выпущена первая версия wl-explorer
0.0.1 Первоначальный выпуск, некоторые функции не разделены, продолжение следует
продолжение следует
- Оптимизировать компонент предварительного просмотра