如何将文本从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>
相关文章