Question

我想将此for循环的内容复制到剪贴板：

<div ref="text" class="links">
        <div class="row" v-for="(name, index) in resultNames" :key="index" >                                    
            <p>{{makeUrl(name)}} </p>
        </div>   
</div>  
<button   @click="handleCopy">Copy to Clipboard</button>

我遵循了this的回答，并提出了这种方法：

  handleCopy() {
     this.$refs.text.select();
     document.execCommand('copy');
    }

但这会导致：

Uncaught TypeError: this.$refs.text.select is not a function

所以我一无所知，该如何使用第三方javascript插件解决此问题？

PS 。我尝试了一些JS特定的建议答案，例如this，但出现错误：

Uncaught TypeError: Failed to execute 'selectNode' on 'Range': parameter 1 is not of type 'Node'.

Answer 1

基于this的答案，以下是选择HTMLElement的文本的功能：

selectText(element) {
  var range;
  if (document.selection) {
    // IE
    range = document.body.createTextRange();
    range.moveToElementText(element);
    range.select();
  } else if (window.getSelection) {
    range = document.createRange();
    range.selectNode(element);
    window.getSelection().removeAllRanges();
    window.getSelection().addRange(range);
  }
}

剩下要做的是a）传递元素b）调用复制命令：

this.selectText(this.$refs.text); // e.g. <div ref="text">
document.execCommand("copy");

Answer 2

您可以在npm：vue-clipboard上使用vue插件

让我们首先制作要复制的html数据。之后，我们可以使用npm插件复制html数据

new Vue({
    el: '#app',
    data: {
        HTMLcontent:'',
        resultNames:["John","Steward","Rock"]
    },
    created() {
    },
    methods:{
        makeData(){
            var self = this;
            for(var i = 0; i < self.resultNames.length; i++){
                self.HTMLcontent += '<p>'+self.resultNames[i]+'</p>';
            }
        },
        copyData(){
            this.makeData();
            console.log(this.HTMLcontent);
        }
    }
});

之后，安装vue插件

npm install --save v-clipboard
import Clipboard from 'v-clipboard'
Vue.use(Clipboard)

之后，按如下所示更改copyData函数

copyData(){
    this.makeData();
    this.$clipboard(this.invite_code);
    alert("Copied to clipboard");
}

希望能解决您的查询

Answer 3

有同样的问题，但是vue剪贴板和剪贴板2并没有帮助我

为了复制到剪贴板，我使用了JQuery和vue事件

HTML部分

<div class="input-group">
  <input type="text" class="form-control copyLinkInput" :value="link">
  <div class="input-group-append" @click="doCopy">
    <div class="input-group-text">
      <i class="fas fa-copy"></i>
    </div>
  </div>
</div>

Vue.js部分

...

props: ['link'],
methods: {
  doCopy: function (e) {
    let selectEl = $(e.target).parents('.input-group').find('.copyLinkInput')[0];

    selectEl.select();
    document.execCommand("copy");
  }
}

...

如何将InnerHtml复制到Vue.js中的剪贴板？

3 个答案: