From ec0fe1a4f92de050fcd1b914c30b93b65c091815 Mon Sep 17 00:00:00 2001 From: Null <7566349+zhongjiayao@user.noreply.gitee.com> Date: Sat, 24 Aug 2024 23:56:23 +0800 Subject: [PATCH] =?UTF-8?q?feat(hooks):=20=E6=96=B0=E5=A2=9EuseClipboard?= =?UTF-8?q?=E9=92=A9=E5=AD=90=E4=BB=A5=E6=94=AF=E6=8C=81=E5=89=AA=E8=B4=B4?= =?UTF-8?q?=E6=9D=BF=E6=93=8D=E4=BD=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 此钩子提供从剪贴板读取内容、向剪贴板写入内容以及监控剪贴板状态的功能 --- CHANGELOG.md | 53 ++++++++++--------- docs/.vitepress/generate-router.js | 18 ++----- docs/useClipboard/demo/index.vue | 16 ++++++ docs/useClipboard/index.md | 19 +++++++ docs/utils.ts | 5 ++ packages/hooks/src/index.ts | 2 + .../hooks/src/useClipboard/demo/index.vue | 16 ++++++ packages/hooks/src/useClipboard/index.md | 19 +++++++ packages/hooks/src/useClipboard/index.ts | 40 ++++++++++++++ packages/hooks/src/useClipboard/meta.json | 3 ++ packages/hooks/src/utils.ts | 5 ++ 11 files changed, 155 insertions(+), 41 deletions(-) create mode 100644 docs/useClipboard/demo/index.vue create mode 100644 docs/useClipboard/index.md create mode 100644 packages/hooks/src/useClipboard/demo/index.vue create mode 100644 packages/hooks/src/useClipboard/index.md create mode 100644 packages/hooks/src/useClipboard/index.ts create mode 100644 packages/hooks/src/useClipboard/meta.json diff --git a/CHANGELOG.md b/CHANGELOG.md index 9218174..2e3aaf4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,32 @@ ## 1.0.0 (2024-08-24) +* feat: 发布`zhongjiayao_v3_hooks`的`1.0.0`版本，设置访问级别为public并更新内部依赖性。移除直接发布命令，使用changeset进行发布 ([6ed8ddf](https://github.com/zjydipingxian/hooks-encode/commit/6ed8ddf)) +* feat: 优化代码结构并增强功能 ([1f988d0](https://github.com/zjydipingxian/hooks-encode/commit/1f988d0)) +* feat: 重命名watch.js为cli/watch.mjs并更新相关引用 ([900b9fe](https://github.com/zjydipingxian/hooks-encode/commit/900b9fe)) +* feat(cli): 创建hooks时增加分类和元数据支持 ([354efbb](https://github.com/zjydipingxian/hooks-encode/commit/354efbb)) +* feat(cli): 文件复制和监视时排除测试文件夹 ([9773c7f](https://github.com/zjydipingxian/hooks-encode/commit/9773c7f)) +* feat(cli): 自动化文档生成和部署流程优化 ([eae7282](https://github.com/zjydipingxian/hooks-encode/commit/eae7282)) +* feat(docs): 添加文档生成和路由配置 ([8545084](https://github.com/zjydipingxian/hooks-encode/commit/8545084)) +* feat(docs): 重构部署脚本和更新文档配置 ([2e8f613](https://github.com/zjydipingxian/hooks-encode/commit/2e8f613)) +* feat(docs): docs生成器更新 & meta.json类型修改 ([eb25ad3](https://github.com/zjydipingxian/hooks-encode/commit/eb25ad3)) +* feat(hook): 新增 useSessionStorage Hook ([7509674](https://github.com/zjydipingxian/hooks-encode/commit/7509674)) +* feat(hooks): "新增useDocumentVisibility钩子以检测页面可见性" ([970adda](https://github.com/zjydipingxian/hooks-encode/commit/970adda)) +* feat(hooks): 添加 useResizeObserver 钩子以监听元素尺寸变化 ([9d71b99](https://github.com/zjydipingxian/hooks-encode/commit/9d71b99)) +* feat(hooks): 添加 useWindowSize 钩子并更新相关路由 ([1166b6b](https://github.com/zjydipingxian/hooks-encode/commit/1166b6b)) +* feat(hooks): hooks包版本更新至0.0.8 ([7f1ccc7](https://github.com/zjydipingxian/hooks-encode/commit/7f1ccc7)) +* feat(husky): 提交钩子中的 changelog 生成命令 ([0950815](https://github.com/zjydipingxian/hooks-encode/commit/0950815)) +* feat(husky): 添加更新changelog的预提交和预推送钩子 ([7e50f4d](https://github.com/zjydipingxian/hooks-encode/commit/7e50f4d)) +* feat(husky): 添加changelog生成和预提交钩子 ([100fa9e](https://github.com/zjydipingxian/hooks-encode/commit/100fa9e)) +* feat(readme): 添加项目特性、安装及使用说明 ([33e569d](https://github.com/zjydipingxian/hooks-encode/commit/33e569d)) +* feat(repo): 初始化changeset系统以支持多包版本管理和发布" ([75ece67](https://github.com/zjydipingxian/hooks-encode/commit/75ece67)) +* feat(useDebounce): 添加useDebounce钩子及其文档和演示 ([84a0de4](https://github.com/zjydipingxian/hooks-encode/commit/84a0de4)) +* feat(useFullscreen): 添加全屏 hooks 支持 ([8d7b4c6](https://github.com/zjydipingxian/hooks-encode/commit/8d7b4c6)) +* feat(useLocalStorage): 添加useLocalStorage钩子并完善文档 ([99af3f7](https://github.com/zjydipingxian/hooks-encode/commit/99af3f7)) +* feat(UseRequestFetch): 新增 useElementBounding Hook 以动态获取 DOM 元素的尺寸和坐标 ([66321e4](https://github.com/zjydipingxian/hooks-encode/commit/66321e4)) +* feat(useThrottle): 添加节流功能的Hook及文档 ([00de81a](https://github.com/zjydipingxian/hooks-encode/commit/00de81a)) +* feat(useTitle): 添加 useTitle 钩子并进行文档更新 ([199f50e](https://github.com/zjydipingxian/hooks-encode/commit/199f50e)) +* feat(useVirtualList): 添加虚拟列表钩子以处理大型数据集 ([7292b7c](https://github.com/zjydipingxian/hooks-encode/commit/7292b7c)) +* feat(zhongjiayao_v3_hooks): 新增 useOnline Hook 以检查浏览器在线状态 ([37af4bc](https://github.com/zjydipingxian/hooks-encode/commit/37af4bc)) * test(hooks): 添加对useBoolean和useToggle和useTitle的单元测试 ([8951ad9](https://github.com/zjydipingxian/hooks-encode/commit/8951ad9)) * test(hooks): 添加useDebounce和useThrottle的测试 ([818815c](https://github.com/zjydipingxian/hooks-encode/commit/818815c)) * test(hooks): 添加useDebounce和useThrottle的测试 ([2d5539a](https://github.com/zjydipingxian/hooks-encode/commit/2d5539a)) @@ -100,32 +127,6 @@ * chore(packages): 更新变更日志并升级hooks包版本 ([66ec3d0](https://github.com/zjydipingxian/hooks-encode/commit/66ec3d0)) * chore(release): 优化发布脚本并更新包json ([ac20ebf](https://github.com/zjydipingxian/hooks-encode/commit/ac20ebf)) * ci(husky): 重构changelog更新流程 ([42b3cb7](https://github.com/zjydipingxian/hooks-encode/commit/42b3cb7)) -* feat: 发布`zhongjiayao_v3_hooks`的`1.0.0`版本，设置访问级别为public并更新内部依赖性。移除直接发布命令，使用changeset进行发布 ([6ed8ddf](https://github.com/zjydipingxian/hooks-encode/commit/6ed8ddf)) -* feat: 优化代码结构并增强功能 ([1f988d0](https://github.com/zjydipingxian/hooks-encode/commit/1f988d0)) -* feat: 重命名watch.js为cli/watch.mjs并更新相关引用 ([900b9fe](https://github.com/zjydipingxian/hooks-encode/commit/900b9fe)) -* feat(cli): 创建hooks时增加分类和元数据支持 ([354efbb](https://github.com/zjydipingxian/hooks-encode/commit/354efbb)) -* feat(cli): 自动化文档生成和部署流程优化 ([eae7282](https://github.com/zjydipingxian/hooks-encode/commit/eae7282)) -* feat(docs): 添加文档生成和路由配置 ([8545084](https://github.com/zjydipingxian/hooks-encode/commit/8545084)) -* feat(docs): 重构部署脚本和更新文档配置 ([2e8f613](https://github.com/zjydipingxian/hooks-encode/commit/2e8f613)) -* feat(docs): docs生成器更新 & meta.json类型修改 ([eb25ad3](https://github.com/zjydipingxian/hooks-encode/commit/eb25ad3)) -* feat(hook): 新增 useSessionStorage Hook ([7509674](https://github.com/zjydipingxian/hooks-encode/commit/7509674)) -* feat(hooks): "新增useDocumentVisibility钩子以检测页面可见性" ([970adda](https://github.com/zjydipingxian/hooks-encode/commit/970adda)) -* feat(hooks): 添加 useResizeObserver 钩子以监听元素尺寸变化 ([9d71b99](https://github.com/zjydipingxian/hooks-encode/commit/9d71b99)) -* feat(hooks): 添加 useWindowSize 钩子并更新相关路由 ([1166b6b](https://github.com/zjydipingxian/hooks-encode/commit/1166b6b)) -* feat(hooks): hooks包版本更新至0.0.8 ([7f1ccc7](https://github.com/zjydipingxian/hooks-encode/commit/7f1ccc7)) -* feat(husky): 提交钩子中的 changelog 生成命令 ([0950815](https://github.com/zjydipingxian/hooks-encode/commit/0950815)) -* feat(husky): 添加更新changelog的预提交和预推送钩子 ([7e50f4d](https://github.com/zjydipingxian/hooks-encode/commit/7e50f4d)) -* feat(husky): 添加changelog生成和预提交钩子 ([100fa9e](https://github.com/zjydipingxian/hooks-encode/commit/100fa9e)) -* feat(readme): 添加项目特性、安装及使用说明 ([33e569d](https://github.com/zjydipingxian/hooks-encode/commit/33e569d)) -* feat(repo): 初始化changeset系统以支持多包版本管理和发布" ([75ece67](https://github.com/zjydipingxian/hooks-encode/commit/75ece67)) -* feat(useDebounce): 添加useDebounce钩子及其文档和演示 ([84a0de4](https://github.com/zjydipingxian/hooks-encode/commit/84a0de4)) -* feat(useFullscreen): 添加全屏 hooks 支持 ([8d7b4c6](https://github.com/zjydipingxian/hooks-encode/commit/8d7b4c6)) -* feat(useLocalStorage): 添加useLocalStorage钩子并完善文档 ([99af3f7](https://github.com/zjydipingxian/hooks-encode/commit/99af3f7)) -* feat(UseRequestFetch): 新增 useElementBounding Hook 以动态获取 DOM 元素的尺寸和坐标 ([66321e4](https://github.com/zjydipingxian/hooks-encode/commit/66321e4)) -* feat(useThrottle): 添加节流功能的Hook及文档 ([00de81a](https://github.com/zjydipingxian/hooks-encode/commit/00de81a)) -* feat(useTitle): 添加 useTitle 钩子并进行文档更新 ([199f50e](https://github.com/zjydipingxian/hooks-encode/commit/199f50e)) -* feat(useVirtualList): 添加虚拟列表钩子以处理大型数据集 ([7292b7c](https://github.com/zjydipingxian/hooks-encode/commit/7292b7c)) -* feat(zhongjiayao_v3_hooks): 新增 useOnline Hook 以检查浏览器在线状态 ([37af4bc](https://github.com/zjydipingxian/hooks-encode/commit/37af4bc)) * build: 配置commitizen并初始化commitlint以规范提交信息格式 ([8055033](https://github.com/zjydipingxian/hooks-encode/commit/8055033)) * build(hooks): hooks版本升级至0.0.9 ([5379bd3](https://github.com/zjydipingxian/hooks-encode/commit/5379bd3)) * docs: 移除 husky 配置中不必要的 changelog 生成命令 ([1f4aeb5](https://github.com/zjydipingxian/hooks-encode/commit/1f4aeb5)) diff --git a/docs/.vitepress/generate-router.js b/docs/.vitepress/generate-router.js index 0754be2..0268a0a 100644 --- a/docs/.vitepress/generate-router.js +++ b/docs/.vitepress/generate-router.js @@ -1,19 +1,7 @@ const Router = { - Dom: [ - 'useClickAway', - 'useDocumentVisibility', - 'useElementBounding', - 'useEventListener', - 'useFullscreen', - 'useHover', - 'useRect', - 'useResizeObserver', - 'useTitle', - 'useVirtualList', - 'useWindowSize', - ], + Dom: ['useClickAway', "useClipboard", 'useDocumentVisibility', 'useElementBounding', 'useEventListener', 'useFullscreen', 'useHover', 'useRect', 'useResizeObserver', 'useTitle', 'useVirtualList', 'useWindowSize'], State: ['useBoolean', 'useDebounce', 'useLocalStorage', 'useOnline', 'useSessionStorage', 'useThrottle', 'useToggle'], Worker: ['useCountDown'], - Effect: ['useDebounceFn', 'useThrottleFn'], + Effect: ['useDebounceFn', 'useThrottleFn'] }; -export default Router; +export default Router; \ No newline at end of file diff --git a/docs/useClipboard/demo/index.vue b/docs/useClipboard/demo/index.vue new file mode 100644 index 0000000..13b7300 --- /dev/null +++ b/docs/useClipboard/demo/index.vue @@ -0,0 +1,16 @@ + + + diff --git a/docs/useClipboard/index.md b/docs/useClipboard/index.md new file mode 100644 index 0000000..508adf7 --- /dev/null +++ b/docs/useClipboard/index.md @@ -0,0 +1,19 @@ +# useClipboard + +提供剪贴板命令(剪切、复制和粘贴) + + + +## API + +| 参数 | 说明 | 类型 | 默认值 | +| ----- | ---------- | ---------------------- | ------ | +| value | 剪贴板内容 | `Ref / string` | `''` | + +## 返回值 + +| 参数 | 说明 | 类型 | +| ----------------- | -------------- | ------------- | +| clipboardContent | 复制文本的内容 | `Ref` | +| copyToClipboard | 复制文本方法 | `() => void` | +| readFromClipboard | 从剪贴板读取 | `() => void` | diff --git a/docs/utils.ts b/docs/utils.ts index 5a6d747..64fea7d 100644 --- a/docs/utils.ts +++ b/docs/utils.ts @@ -2,6 +2,11 @@ import { nextTick, onMounted, onActivated } from 'vue'; export const isBrowser = typeof window !== 'undefined'; +export function getGlobal() { + if (isBrowser) return window as unknown as T; +} +export const _global = getGlobal(); + export type Fn = (...[]: any[]) => any; export const supportsPassive = true; diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts index e64a290..f094bf6 100644 --- a/packages/hooks/src/index.ts +++ b/packages/hooks/src/index.ts @@ -19,6 +19,7 @@ import useResizeObserver from './useResizeObserver'; import useElementBounding from './useElementBounding'; import useOnline from './useOnline'; import useSessionStorage from './useSessionStorage'; +import useClipboard from './useClipboard'; export { useBoolean, useToggle, @@ -41,4 +42,5 @@ export { useElementBounding, useOnline, useSessionStorage, + useClipboard, }; diff --git a/packages/hooks/src/useClipboard/demo/index.vue b/packages/hooks/src/useClipboard/demo/index.vue new file mode 100644 index 0000000..13b7300 --- /dev/null +++ b/packages/hooks/src/useClipboard/demo/index.vue @@ -0,0 +1,16 @@ + + + diff --git a/packages/hooks/src/useClipboard/index.md b/packages/hooks/src/useClipboard/index.md new file mode 100644 index 0000000..508adf7 --- /dev/null +++ b/packages/hooks/src/useClipboard/index.md @@ -0,0 +1,19 @@ +# useClipboard + +提供剪贴板命令(剪切、复制和粘贴) + + + +## API + +| 参数 | 说明 | 类型 | 默认值 | +| ----- | ---------- | ---------------------- | ------ | +| value | 剪贴板内容 | `Ref / string` | `''` | + +## 返回值 + +| 参数 | 说明 | 类型 | +| ----------------- | -------------- | ------------- | +| clipboardContent | 复制文本的内容 | `Ref` | +| copyToClipboard | 复制文本方法 | `() => void` | +| readFromClipboard | 从剪贴板读取 | `() => void` | diff --git a/packages/hooks/src/useClipboard/index.ts b/packages/hooks/src/useClipboard/index.ts new file mode 100644 index 0000000..fa8d95a --- /dev/null +++ b/packages/hooks/src/useClipboard/index.ts @@ -0,0 +1,40 @@ +import { Ref, ref, unref } from 'vue'; + +export type clipboardOptions = { + clipboardContent: Ref; + // eslint-disable-next-line no-unused-vars + copyToClipboard: (text: string) => void; + readFromClipboard: () => void; +}; + +function useClipboard(defaultValue: Ref | string): clipboardOptions { + const clipboardContent = ref(unref(defaultValue)); + console.log('🚀 ~ useClipboard ~ clipboardContent:', clipboardContent); + + const copyToClipboard = async (text: string) => { + try { + await navigator.clipboard.writeText(text); + clipboardContent.value = text; + console.log('内容已复制到剪贴板', text); + } catch (err) { + console.error('复制到剪贴板失败: ', err); + } + }; + + const readFromClipboard = async () => { + try { + const text = await navigator.clipboard.readText(); + clipboardContent.value = text; + console.log('从剪贴板读取的内容: ', text); + } catch (err) { + console.error('读取剪贴板内容失败: ', err); + } + }; + + return { + clipboardContent, + copyToClipboard, + readFromClipboard, + }; +} +export default useClipboard; diff --git a/packages/hooks/src/useClipboard/meta.json b/packages/hooks/src/useClipboard/meta.json new file mode 100644 index 0000000..5fa1403 --- /dev/null +++ b/packages/hooks/src/useClipboard/meta.json @@ -0,0 +1,3 @@ +{ + "type": "Dom" +} diff --git a/packages/hooks/src/utils.ts b/packages/hooks/src/utils.ts index 5a6d747..64fea7d 100644 --- a/packages/hooks/src/utils.ts +++ b/packages/hooks/src/utils.ts @@ -2,6 +2,11 @@ import { nextTick, onMounted, onActivated } from 'vue'; export const isBrowser = typeof window !== 'undefined'; +export function getGlobal() { + if (isBrowser) return window as unknown as T; +} +export const _global = getGlobal(); + export type Fn = (...[]: any[]) => any; export const supportsPassive = true;