vue 点击粘贴 内容至输入框方法
时间: 2023-08-13 08:09:40 浏览: 260
可以使用 `v-on:click` 和 `navigator.clipboard.readText()` 方法来实现点击粘贴内容至输入框的功能。具体实现方法如下:
1. 在需要点击粘贴的元素中添加 `v-on:click` 事件绑定:
```
<button v-on:click="pasteToInput">粘贴</button>
```
2. 在 Vue 实例中定义 `pasteToInput` 方法:
```
methods: {
async pasteToInput() {
const text = await navigator.clipboard.readText();
this.inputValue = text;
}
}
```
其中,`navigator.clipboard.readText()` 方法用于异步读取剪贴板中的文本内容,`this.inputValue` 是需要粘贴内容的输入框的绑定值。
完整代码示例:
```
<template>
<div>
<input v-model="inputValue" />
<button v-on:click="pasteToInput">粘贴</button>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: ''
};
},
methods: {
async pasteToInput() {
const text = await navigator.clipboard.readText();
this.inputValue = text;
}
}
};
</script>
```
阅读全文
相关推荐















