Question

我在bootstrp-vue模态中使用了vue-clipboard2插件。但是文本没有被复制。

然后，我尝试使用bootstrap-vue模态中的香草js复制到剪贴板。但是文本没有被复制。

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

Answer 1

以下内容对我有用，并使用了大多数现代浏览器都支持的新Clipboard API writeText method（有关更多详细信息，请参见Can I use），并且不需要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)

vue-clipboard2在bootstrap-vue模态中不起作用

2 个答案: