vue-clipboard2 无法在 bootstrap-vue 模式中工作

Question

我在 bootstrp-vue 模式中使用了 vue-clipboard2 插件。但文字并非抄袭。

然后我尝试在 bootstrap-vue 模式中使用 vanilla js 复制到剪贴板。但文字并非抄袭。

任何人都可以找出问题所在吗？

Answer 1

以下内容对我有用，并使用大多数现代浏览器支持的新Clipboard API writeText 方法（请参阅我可以使用了解更多详细信息）并且不需要 vue-clipboard。

//If you want to copyText from Element
function copyTextFromElement(elementID) {
  let element = document.getElementById(elementID); //select the element
  let elementText = element.textContent; //get the text content from the element
  copyText(elementText); //use the copyText function below
}

//If you only want to put some Text in the Clipboard just use this function
// and pass the string to copied as the argument.
function copyText(text) {
  navigator.clipboard.writeText(text);
}

<div id="mytext">This is some text that needs to be copied</div>
<button onclick="copyTextFromElement('mytext')">Copy</button>

Answer 2

这个特定问题的答案位于https://github.com/Inndy/vue-clipboard2的文档中。

通过使用容器选项：

let container = this.$refs.container
this.$copyText("Text to copy", container)

或者你可以让 vue-clipboard2 将容器设置为当前元素：

import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'

VueClipboard.config.autoSetContainer = true // add this line
Vue.use(VueClipboard)