懒猫文件选择器
通过使用该插件可快速实现选择网盘文件/保存到网盘
快速开始
可通过 npm 安装的方式
npm i --save @lazycatcloud/lzc-file-pickers可直接查看生成的 types.d.ts 当作文档参考
使用示例
原生使用
<html lang="en">
<head>
<script defer src="/dist/lzc-file-pickers.umd.js"></script>
</head>
<body>
<button type="button" id="open">打开文件选择器</button>
<lzc-file-picker
id="dev"
type="saveAs"
write-file-content
title="保存文件"
breadcrumb-root-title="根目录"
></lzc-file-picker>
</body>
<script>
window.addEventListener("DOMContentLoaded", (event) => {
const $0 = document.getElementById("dev")
const button = document.querySelector("button")
function setState(value) {
$0._instance.exposed[value ? "open" : "close"]()
}
function dataTransfer(raw) {
if (!raw) return
const output = raw.detail[0]
return output
}
const disk = `/_lzc/files/home`
let isInit = false
button.addEventListener("click", () => {
const ctx = $0._instance.exposed
// 未初始化之后可记忆之前的路径
if (!isInit) {
ctx.init(disk)
isInit = true
}
// 如果 `type=saveAs` 并启用 `writeFileContent` 参数则需要使用 `sendSaveAsData` 将保存内容传递过去
// 参数以此是: 内容, 后缀名, 默认文件名
// 具体请看 `./dts/types.d.ts` 类型定义
ctx.sendSaveAsData("我是内容", "txt", "2023年6月8日")
ctx.open()
})
$0.addEventListener("visible", () => {
const next = confirm("你确定关闭吗?")
if (next) setState(false)
})
// type="file | dir" 触发
$0.addEventListener("submit", (raw) => {
const selected = dataTransfer(raw)
console.log({ selected })
setState(false)
})
// type="saveAs"
$0.addEventListener("done", (raw) => {
const selected = dataTransfer(raw)
const { status, stat } = selected
status.then((flag) => {
console.log(`执行${flag ? "成功" : "失败"}`)
})
setState(false)
})
})
</script>
</html>Vuejs 使用
首先需要再 main.(ts|js) 中注册
import "@lazycatcloud/lzc-file-pickers"然后.vue中就有了这个全局自定义标签
<lzc-file-picker
ref="ctx"
accept="video/*, audio/x-mpegurl, application/vnd.apple.mpegurl, application/vnd.rn-realmedia"
type="file"
title="选择网盘文件"
confirm-button-title="开始播放"
@submit="submit"
></lzc-file-picker>
<scirpt setup lang="ts">
const show = ref(false)
const ctx = ref()
async function invoke(method: string, ...args: string[]) {
await nextTick()
const exposed = ctx.value._instance.exposed
!!exposed[method] && exposed[method](...args)
}
watch(show, (newVal)=> {
if(newVal) {
invoke("init")
invoke("open")
}
})
const submit = (e: CustomEvent) => {
const file = dataTransfer<FileStat>(e)
if (!file) return
};
function dataTransfer<T>(raw: any) {
if (!raw) return
const output = raw.detail[0]
return output as T
}
</script>React 示例
引入同 vuejs
import { useRef } from "react"
import "./App.css"
import { IFilePickerInstance } from "@lazycatcloud/dts/jsx"
function App() {
const ref = useRef < IFilePickerInstance > null
const onClick = () => {
const ctx = ref.current
if (!ctx) return
ctx._instance.exposed.open()
}
return (
<>
<lzc-file-picker ref={ref} title="你好世界" />
<div>
<a href="#" onClick={onClick}>
点我
</a>
</div>
</>
)
}
export default App常见问题
自定义 lzc-file-picker 标签怎么全局注册识别?
如果是在 typescript 环境下可以手动将将类型添加到 tsconfig.json -> compilerOptions -> types
+ "types": [
+ "@lazycatcloud/lzc-file-pickers/dts/jsx"
+ ],- Vue 组件
- vue <= 2.6 引用
vue26 - vue 2.7 引用
vue27 - vue >= 3 引用
vue3
- vue <= 2.6 引用
- JSX 组件引用
jsx
SSR 环境下如何使用
TODO