vue获取剪贴板内容
时间: 2023-08-21 13:03:30 浏览: 82
要获取剪贴板内容,可以使用 `navigator.clipboard.readText()` 方法,该方法返回一个 Promise 对象。在 Vue 中可以在方法中调用该方法并将剪贴板内容保存到 data 中的变量中,例如:
```
<template>
<div>
<button @click="getClipboardContent">获取剪贴板内容</button>
<p>剪贴板内容:{{ clipboardContent }}</p>
</div>
</template>
<script>
export default {
data() {
return {
clipboardContent: ''
}
},
methods: {
async getClipboardContent() {
try {
const content = await navigator.clipboard.readText()
this.clipboardContent = content
} catch (error) {
console.error(error)
}
}
}
}
</script>
```
在上面的代码中,`getClipboardContent` 方法通过 `navigator.clipboard.readText()` 方法获取剪贴板内容,并将其保存到 `clipboardContent` 变量中,最终在模板中展示。