@lazycatcloud/lzc-file-pickers

v2.0.2

Published

8 days ago

通过使用该插件可快速实现选择网盘文件/保存到网盘

Downloads

0High
0Medium
0Low

懒猫文件选择器

通过使用该插件可快速实现选择网盘文件/保存到网盘

快速开始

可通过 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 = `/api/files/home`
      // 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
JSX 组件引用 jsx

SSR 环境下如何使用

TODO

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme