Vue 点击复制粘贴文本

最新推荐文章于 2023-02-18 12:57:32 发布

林中明月间。

最新推荐文章于 2023-02-18 12:57:32 发布

阅读量5.1k

点赞数

分类专栏： Vue.js

原文链接：https://www.cnblogs.com/sherlock-Ace/p/10803961.html

版权

Vue.js 专栏收录该内容

195 篇文章 21 订阅

订阅专栏

https://www.cnblogs.com/sherlock-Ace/p/10803961.html

https://blog.csdn.net/weixin_42398560/article/details/90766534?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

通过使用Vue-clipboard2实现

npm install --save vue-clipboard2
 
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
 
Vue.use(VueClipboard)

<div id="app"></div>
 
<template id="t">
    <div class="container">
    <input type="text" v-model="message">
    <button type="button" @click="doCopy">Copy!</button>
    </div>
  </template>
 
  <script>
  new Vue({
    el: '#app',
    template: '#t',
    data: function () {
      return {
        message: 'Copy These Text',
        copytext:'' 
      }
    },
    methods: {
      doCopy: function () {
        //复制多个值：把所有想要复制的值 给一个新值
        let copytext = this.copytext + " " + this.ip;
        this.$copyText( copytext ).then(function (e) {
          alert('Copied')
          console.log(e)
        }, function (e) {
          alert('Can not copy')
          console.log(e)
        })
      }
    }
  })
  </script>

select() 方法只对 input和 textarea有效

<span class="courier">
     快递单号：<input type="text" v-model="danhao" id="danhao">
</span>
<span class="sp1" @click="copy">
      复制单号
</span>
methods:{
        copy() {
         // var number = document.getElementById("danhao").value;//获取需要复制的值(innerHTML)
             document.getElementById("danhao").select(); // 选择对象
             document.execCommand("Copy"); // 执行浏览器复制命令
             alert('复制成功')
            }
    },

// 点击复制
copy (wechatId) {
	document.getElementById(wechatId).select() // 选择对象
	document.execCommand('Copy') // 执行浏览器复制命令
	console.log('复制成功')
}