LunarXYZuseClipboard
使用剪贴板，提供复制、剪切、粘贴等剪贴板操作方法。
Type Declarations
本系列方法用到的一些公共类型。
ts
/**
* 样式名或者 ID
*/
type ClassNameOrID<T extends string> = `.${T}` | `#${T}`
下面各个方法入参类型的说明：
| 类型 | 说明 | 例子 |
|---|---|---|
ClassNameOrID<string> | 样式名或 ID | '.foo' 或者 '#foo' |
HTMLElement | 具有 innerText 接口的 DOM 元素 | document.querySelector('div') |
HTMLInputElement | <input /> 的 DOM 元素 | document.querySelector('input') |
HTMLTextAreaElement | <textarea /> 的 DOM 元素 | document.querySelector('textarea') |
string | 要被复制的文本内容 | '这是被复制的内容' |
isSupported
是否支持剪贴板。
- Supported Platforms:
Browser | Electron | App | Server | Scriptlet |
- Type Declarations:
ts
/**
* 本身是一个 Vue Ref 变量
*/
import('vue').Ref<boolean>
- Example:
ts
import { useClipboard } from '@lunarxyz/core'
const { isSupported } = useClipboard()
if (!isSupported.value) {
console.log('请手动复制')
}
clipText
剪贴板的文本内容，调用操作剪贴板的方法时，会更新该变量的值。
TIP
原本打算提供一个 Ref 类型的变量，但考虑到直接对变量赋值并不会修改你的剪贴板，如果提供功能支持可能会带来一些副作用。
所以该变量最终调整为 ComputedRef 类型，仅提供 getter ，如果要写入剪贴板，可用 write 方法来操作。
- Supported Platforms:
Browser | Electron | App | Server | Scriptlet |
- Type Declarations:
ts
/**
* 本身是一个 Vue ComputedRef 变量
* @tips 只提供了 getter
*/
import('vue').ComputedRef<string>
- Example:
ts
import { useClipboard } from '@lunarxyz/core'
const { clipText } = useClipboard()
console.log('剪贴板的内容是：', clipText.value)
copy
复制。
- Supported Platforms:
Browser | Electron | App | Server | Scriptlet |
- Type Declarations:
ts
declare function copy(
target:
| ClassNameOrID<string>
| HTMLElement
| HTMLInputElement
| HTMLTextAreaElement
| string
): Promise<boolean>
- Example:
vue
<template>
<div class="container">
<div class="line">
<input class="input" type="text" v-model="inputVal" />
<button @click="copy('.input')">复制</button>
</div>
<div class="line">
<span class="title">当前剪切板的内容：</span>
<span>{{ clipText }}</span>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useClipboard } from '@lunarxyz/core'
const { clipText, copy } = useClipboard()
const inputVal = ref<string>('')
</script>
cut
剪切。
- Supported Platforms:
Browser | Electron | App | Server | Scriptlet |
- Type Declarations:
ts
declare function cut(
target: ClassNameOrID<string> | HTMLInputElement | HTMLTextAreaElement
): Promise<boolean>
- Example:
vue
<template>
<div class="container">
<div class="line">
<input class="input" type="text" v-model="inputVal" />
<button @click="cut('.input')">剪切</button>
</div>
<div class="line">
<span class="title">当前剪切板的内容：</span>
<span>{{ clipText }}</span>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useClipboard } from '@lunarxyz/core'
const { clipText, cut } = useClipboard()
const inputVal = ref<string>('')
</script>
read
读取剪切板的内容。
- Supported Platforms:
Browser | Electron | App | Server | Scriptlet |
- Type Declarations:
ts
declare function read(): Promise<string>
- Example:
ts
import { ref } from 'vue'
import { useClipboard } from '@lunarxyz/core'
const { read } = useClipboard()
const text = read()
console.log('当前剪贴板的内容是', text)
write
把内容写入剪切板。
- Supported Platforms:
Browser | Electron | App | Server | Scriptlet |
- Type Declarations:
ts
declare function write(text?: string): Promise<boolean>
- Example:
vue
<template>
<div class="container">
<div class="line">
<span class="title">当前剪切板的内容：</span>
<span>{{ clipText }}</span>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useClipboard } from '@lunarxyz/core'
const { clipText, write } = useClipboard()
write('这是写入剪贴板的内容')
</script>