-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(hooks): 新增useClipboard钩子以支持剪贴板操作
此钩子提供从剪贴板读取内容、向剪贴板写入内容以及监控剪贴板状态的功能
- Loading branch information
Null
committed
Aug 24, 2024
1 parent
9773c7f
commit ec0fe1a
Showing
11 changed files
with
155 additions
and
41 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <template> | ||
| <a-input v-model:value="inputValue" class="mb10" placeholder="请输入" /> | ||
| <a-space class="mb10"> | ||
| <a-button @click="copyToClipboard(inputValue)">复制</a-button> | ||
| <a-button @click="readFromClipboard">从剪贴板读取</a-button> | ||
| </a-space> | ||
| <p>剪贴板内容: {{ clipboardContent }}</p> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import { ref } from 'vue'; | ||
| import { useClipboard } from 'zhongjiayao_v3_hooks'; | ||
| const inputValue = ref(''); | ||
| const { clipboardContent, copyToClipboard, readFromClipboard } = useClipboard('默认值'); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| # useClipboard | ||
|
|
||
| 提供剪贴板命令(剪切、复制和粘贴) | ||
|
|
||
| <preview path="./demo/index.vue" title="基本使用" description='输入值，请点击按钮查看效果'></preview> | ||
|
|
||
| ## API | ||
|
|
||
| | 参数 | 说明 | 类型 | 默认值 | | ||
| | ----- | ---------- | ---------------------- | ------ | | ||
| | value | 剪贴板内容 | `Ref<string> / string` | `''` | | ||
|
|
||
| ## 返回值 | ||
|
|
||
| | 参数 | 说明 | 类型 | | ||
| | ----------------- | -------------- | ------------- | | ||
| | clipboardContent | 复制文本的内容 | `Ref<string>` | | ||
| | copyToClipboard | 复制文本方法 | `() => void` | | ||
| | readFromClipboard | 从剪贴板读取 | `() => void` | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| <template> | ||
| <a-input v-model:value="inputValue" class="mb10" placeholder="请输入" /> | ||
| <a-space class="mb10"> | ||
| <a-button @click="copyToClipboard(inputValue)">复制</a-button> | ||
| <a-button @click="readFromClipboard">从剪贴板读取</a-button> | ||
| </a-space> | ||
| <p>剪贴板内容: {{ clipboardContent }}</p> | ||
| </template> | ||
|
|
||
| <script setup> | ||
| import { ref } from 'vue'; | ||
| import { useClipboard } from 'zhongjiayao_v3_hooks'; | ||
| const inputValue = ref(''); | ||
| const { clipboardContent, copyToClipboard, readFromClipboard } = useClipboard('默认值'); | ||
| </script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,19 @@ | ||
| # useClipboard | ||
|
|
||
| 提供剪贴板命令(剪切、复制和粘贴) | ||
|
|
||
| <preview path="./demo/index.vue" title="基本使用" description='输入值，请点击按钮查看效果'></preview> | ||
|
|
||
| ## API | ||
|
|
||
| | 参数 | 说明 | 类型 | 默认值 | | ||
| | ----- | ---------- | ---------------------- | ------ | | ||
| | value | 剪贴板内容 | `Ref<string> / string` | `''` | | ||
|
|
||
| ## 返回值 | ||
|
|
||
| | 参数 | 说明 | 类型 | | ||
| | ----------------- | -------------- | ------------- | | ||
| | clipboardContent | 复制文本的内容 | `Ref<string>` | | ||
| | copyToClipboard | 复制文本方法 | `() => void` | | ||
| | readFromClipboard | 从剪贴板读取 | `() => void` | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import { Ref, ref, unref } from 'vue'; | ||
|
|
||
| export type clipboardOptions = { | ||
| clipboardContent: Ref<string>; | ||
| // eslint-disable-next-line no-unused-vars | ||
| copyToClipboard: (text: string) => void; | ||
| readFromClipboard: () => void; | ||
| }; | ||
|
|
||
| function useClipboard(defaultValue: Ref<string> | 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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| { | ||
| "type": "Dom" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters