![](/img/trans.png)
[英]How can I adapt the official Vue filter example to use Vuetify's `v-text-field`
[英]How can I copy text from Vuetify's v-text-field to clipboard?
我正在使用Vuetify并尝试在单击按钮时将文本从v-text-field
组件复制到剪贴板。 Sample code available on codepen
:
<template>
<div id="app">
<v-app id="inspire">
<v-container>
<v-text-field v-model="text1"></v-text-field>
<v-btn @click="copyText">copy</v-btn>
</v-container>
</v-app>
</div>
</template>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
text1: 'lorem ipsum 123'
}
},
methods: {
copyText (){
// copy to clipboard
}
}
})
</script>
问题是在 Vue 实例的copyText
方法中放入什么代码?
这个解决方案对我有用。 它使用大多数现代浏览器都支持的新剪贴板 API writeText 方法(有关更多详细信息,请参阅Can I use )。 写入剪贴板不需要特殊权限。
methods: {
copyText() {
navigator.clipboard.writeText(this.text1);
}
}
您可以通过为ref
属性分配一个值,然后在方法中请求input
元素,使用select
函数选择其内容并使用document.execCommand("copy");
复制该内容document.execCommand("copy");
:
<template>
<div id="app">
<v-app id="inspire">
<v-container>
<v-text-field v-model="text1" ref="textToCopy"></v-text-field>
<v-btn @click="copyText">copy</v-btn>
</v-container>
</v-app>
</div>
</template>
<script>
new Vue({
el: '#app',
vuetify: new Vuetify(),
data() {
return {
text1: 'lorem ipsum 123'
}
},
methods: {
copyText () {
let textToCopy = this.$refs.textToCopy.$el.querySelector('input')
textToCopy.select()
document.execCommand("copy");
}
}
})
</script>
我用 vue-clipboards 解决了。
1.- npm install vue-clipboards
2.- 在你的 main.js 中添加这个
import VueClipboards from 'vue-clipboards'
Vue.use(VueClipboards)
3.- 创建 vuetify btn 并添加 v-clipboard,如下所示
<v-btn v-clipboard="clipboardValue">add to clipboard</v-btn>
4.- 在你的数据部分(你可以用任何方法或你想要的地方填写你的变量)。
data: () => ({
clipboardValue: 'something'
}),
5.- 运行您的代码。 它的全部。
为v-text-field
元素分配一个 id,例如:
<v-text-field v-model="text1" id="tocopy" ></v-text-field>
并将以下代码添加到您的方法中:
copyText(){
let input=document.getElementById("tocopy");
input.select();
document.execCommand("copy");
}
检查这个codepen
这不需要任何类型的第三方库只需使用 On click 方法传递动态字符串
<template>
<v-btn @click="copyToClipBoard(errorMsg)">
<v-icon>mdi-content-copy</v-icon>
</v-btn>
</template>
方法会将其直接复制到剪贴板
methods: {
copyToClipBoard(textToCopy) {
navigator.clipboard.writeText(textToCopy);
},
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.