直播软件搭建，vue 复制剪切板功能

直播软件搭建，vue 复制剪切板功能

第一种：利用document.execCommand() 这个方法 执行浏览器复制领命 

 

1

<br><template><br>    <div class="seller-box" @click="Copy('我要复制')"></dev><br></template><br> <br>methods:{<br>  Copy(data){<br>    let url = data;<br>    let oInput = document.createElement('input');<br>    oInput.value = url;<br>    document.body.appendChild(oInput);<br>    oInput.select(); // 选择对象;<br>    document.execCommand("Copy"); // 执行浏览器复制命令<br>    this.$toast('复制成功');<br>    oInput.remove()<br>  }<br>}

​

第二种方法：利用第三方插件 vue-clipboard2 

 

安装 

 

1	<br>npm install vue-clipboard2 --save

 

注入

 

1	<br>import VueClipboard from 'vue-clipboard2'<br>Vue.use(VueClipboard)

 

使用

 

1

<br><template><br> <div class="container"><br>  <input type="text" v-model="message"><br>  <button type="button" @click="doCopy('来呀！来呀')">Copy!</button><br> </div><br></template><br><script><br> export default {<br>  data() {<br>   return {<br>    message: '快点复制我'<br>   }<br>  },<br>  methods: {<br>   dataProcessing (val) {<br>    this.message = this.message + ' ' + val<br>   },<br>   doCopy: function (val) {<br>    this.dataProcessing(val)<br>    this.$copyText(this.message).then(function (e) {<br>     alert('Copied')<br>     console.log(e)<br>    }, function (e) {<br>     alert('Can not copy')<br>     console.log(e)<br>    })<br>   }<br>  }<br> }<br></script>

 

 以上就是 直播软件搭建，vue 复制剪切板功能，更多内容欢迎关注之后的文章