1.3.19 • Published 4 months ago

@lazycatcloud/lzc-file-pickers v1.3.19

Weekly downloads
-
License
ISC
Repository
-
Last release
4 months ago

懒猫文件选择器

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

快速开始

可通过 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
  • JSX 组件引用 jsx

SSR 环境下如何使用

TODO

@everything-registry/sub-chunk-538
1.3.19

4 months ago

1.3.17

9 months ago

1.3.18

8 months ago

1.3.15

10 months ago

1.3.16

10 months ago

1.3.7

12 months ago

1.3.6

12 months ago

1.3.10

11 months ago

1.3.13

11 months ago

1.3.14

11 months ago

1.3.11

11 months ago

1.3.9

12 months ago

1.3.8

12 months ago

1.2.8

1 year ago

1.2.7

1 year ago

1.3.5

1 year ago

1.2.6

1 year ago

1.3.4

1 year ago

1.3.3

1 year ago

1.2.4

1 year ago

1.3.2

1 year ago

1.2.3

1 year ago

1.3.1

1 year ago

1.3.0

1 year ago

1.2.9

1 year ago

1.2.0

1 year ago

1.0.9

1 year ago

1.0.8

1 year ago

1.0.7

1 year ago

1.0.6

1 year ago

1.2.2

1 year ago

1.2.1

1 year ago

1.0.5

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago