本文介绍了如何将文本从Vutify的v-text字段复制到剪贴板？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
单击按钮时，我正在使用注册并尝试将文本从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方法中放入什么代码？
推荐答案
您可以通过为ref属性赋值，然后在请求input元素的方法中，使用select函数选择其内容，并使用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>
这篇关于如何将文本从Vutify的v-text字段复制到剪贴板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！