@ bytetrade/ files- pickers-wc 页面存档备份,存于互联网档案馆
自成一体 <olares-folder-picker> 从 Olares 文件树中选择文件夹(或文件)的自定义元素。 由 Vue 3 自定义元素和一个阴影 DOM 所建;样式通过 styles 选项,所以任何主机捆绑程序都会起作用.
两个构建条目
| 导入 | 套装 | 何时使用 |
|---|---|---|
@bytetrade/files-picker-wc | 相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相 外部化 vue 财务报告和审定财务报表 @bytetrade/files-core。 。 。 . | 已经拥有这些软件包(Quasar app)的主机. 需求 这样 configureFiles({ browser }) 和拾取者 getFilesConfig().browser 共享一个文件核心单子 . |
@bytetrade/files-picker-wc/standalone | 完全自成一体(~323 kB). | 没有Vue / 文件-core(如React)的主机. |
从寄存器根运行这些 ; files-core 必须先建,因为
对等建构对照其输出编译.
npm install
npm run build # files-core, then this package's peer + standalone bundles
npm run smoke # jsdom checklist against the standalone artefact
npm run lint
属性
| 属性 | Prop | 默认 | 页:1 |
|---|---|---|---|
origins | origins | 驱动、同步、 外部、 缓存、 数据、 Common | 逗号分隔 DriveType 数值 |
pick-type | pickType | FOLDER | FOLDER 或者说 FILE |
icon-base | iconBase | /img | 文件/文件夹 SVG 美术的基础 URL |
locale | locale | en-US | 更改时的热更新标签 |
theme | theme | light | light 编号 : dark (单位:千美元)data-theme(中文(简体) ) |
mobile-root-title | mobileRootTitle | 当前选中标题 | 主机本地化的移动存储页标题 |
mobile-root-label | mobileRootLabel | 空 | 储存地点上方的主机定位 |
mobile-sync-title | mobileSyncTitle | 同步组标签 | 主机本地化的图书馆网页标题 |
mobile | mobile | auto | auto 从一个区域选择布局 max-width: 720px 查询; true 编号 : false 强制移动页面堆栈或桌面对话框。 见 MOBILE SHARD.md (英语) |
master-node | masterNode | 虚假 | 限制主节点驱动器 |
base-url | baseUrl | (图像) | 可选覆盖 |
| —— 说 | token | (图像) | 属性而非属性 |
| —— 说 | transport | (图像) | 属性而非属性 |
活动
| 活动 | 细节 |
|---|---|
pick | FOLDER(单位:千美元) FilePath (车厢可以围成 [FilePath]) (中文(简体) ). FILE数字 : FileItem[]。 。 。 . |
cancel | 无 |
必需: 注射 FilesBrowserClient
该元素从未与文件 HTTP API 本身交谈 。 打开前, 主机必须配置文件核心 :
import { configureFiles } from '@bytetrade/files-core/base';
import { registerOlaresFolderPicker } from '@bytetrade/files-picker-wc';
configureFiles({ browser: myClient /* + token, transport, … */ });
registerOlaresFolderPicker();
const el = document.createElement('olares-folder-picker');
el.setAttribute('pick-type', 'FOLDER');
el.setAttribute('locale', 'zh-CN');
el.addEventListener('pick', e => {
/* … */
});
document.body.appendChild(el);
若为 browser 缺少, 拾取者靴子为空(boot() 返回较早.
两个布局
桌面布局是一个可调整的对话框(侧菜单+面包屑+可排序列). 移动版式为全屏底页,并有页面堆栈:先是驱动列表,再是上市. 水龙头打开文件夹( 触摸没有) dblclick),所以只能切换文件选择. 选择方式 mobile。 。 。 .
图标字体
图标是通过文档级别渲染的材料符号连接符 @font-face 以别名代替主机安装的任何设备local(...)) (中文(简体) ). 主办者 子集 他们的图标字体必须保留拾取者使用的绳子- close, (中文(简体) ), arrow_back, (中文(简体) ), arrow_forward, (中文(简体) ), chevron_left, (中文(简体) ), keyboard_arrow_right, (中文(简体) ), check_circle - 或这些格言成原始文本。 一个只扫描主机自身来源的子集脚本不会看到它们,因为它们生活在这个包的捆绑中. 在TermiPass中,它们被列入 packages/app/scripts/icons/icons.allowlist.txt。 。 。 .
i18n (英语)
单独的目录覆盖 内 财务报告和审定财务报表 日语 只有这个 在Quasar软件内, setFilesI18n 向应用程序翻译员转发 所以每种语言都有效.
同行对第二 Vue / 文件核心副本
执行 没有 将对等方建为解决 不同 @bytetrade/files-core 比一个 configureFiles 被召唤的,拾取者将看见 browser === undefined。TermiPass Quasar 应用程序消耗对等条目并安装 @bytetrade/files-core 本身,所以两个解析到一个副本;外部反应应用程序应当使用 ./standalone 打电话 configureFiles 从同一模块图(从包中再导出)中.