vue 实现点击复制指定内容到粘贴板

2021-01-11 19:29:18 阅读：557 来源： 互联网

标签：vue 粘贴板 text list 点击 clipboard 复制 data

纯前端需求，要求点击 “复制” 按钮把输入框或者指定的文本复制到粘贴板。vue 有专门的插件来实现这个功能：vue-clipboard2、clipboard

vue-clipboard2

安装：

npm install --save vue-clipboard2

在main.js中引入：

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

页面使用：

<template>
  <div class="container">
    <div id="target">
		<p v-for="item in list">{{item}}</p>
	</div>
    <button type="button" @click="copy">复制</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        list:['这是一个循环出来的数据','可以通过div标签拿到渲染后的数据','然后实现list数组渲染后的数据复制']
      }
    },
    methods: {
      copy() {
      	let text = document.getElementById('target').innerText;
        this.$copyText(text).then((e) => {
          console.log('复制成功');
        }, (e) => {
          console.log('复制成功');
        })
      }
    }
  }
</script>

clipboard

安装：

npm install clipboard --save

在main.js里引入：

import clipboard from 'clipboard';
Vue.prototype.clipboard = clipboard;

页面里使用：

<template>
  <div class="container">
    <div id="target">
		<p v-for="item in list">{{item}}</p>
	</div>
    <button class="btn" type="button" data-clipboard-target="#target" @click="copy">复制</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        list:['这是一个循环出来的数据','可以通过div标签拿到渲染后的数据','然后实现list数组渲染后的数据复制']
      }
    },
    methods: {
      copy() {
      	let clipboard = new this.clipboard(".btn");
        clipboard.on('success', function () {
	      console.log("复制成功")
	     });
	    clipboard.on('error', function () {
	       console.log("复制失败")
	    });
      }
    }
  }
</script>

data-clipboard-target属性的值指定被复制元素的选择器；
data-clipboard-action属性来指定你想要复制（copy）还是剪切（cut）内容，默认copy；
还需要注意的是如果设置cut动作只在或元素里面起作用；
单页应用程序可以使用 clipboard.destroy() 方法来销毁创建的事件和对象；
如果你不需要从另一个元素来复制内容。你只需要给目标元素设置一个 data-clipboard-text 属性就可以了； data-clipboard-text 属性值为你设置的固定内容。

原生方法

原生方法也可以实现复制，但是兼容性不怎么好，有些浏览器不支持。主要是通过动态创建一个 input 框，把要复制内容放到 input 框里，然后手动控制选中，在调用浏览器的 copy 方法。

<template>
  <div class="container">
    <div id="target">
		<p v-for="item in list">{{item}}</p>
	</div>
    <button type="button" @click="copyText">复制</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        list:['这是一个循环出来的数据','可以通过div标签拿到渲染后的数据','然后实现list数组渲染后的数据复制']
      }
    },
    methods: {
      copyText() {
      	let text = document.getElementById('target').innerText;
      	let inputElement = document.createElement('input')
      	inputElement.value = text;
      	document.body.appendChild(inputElement);
      	inputElement .select(); //选中文本
   		document.execCommand("copy"); //执行浏览器复制命令
   		inputElement.remove();
   		console.log("复制成功")
      }
    }
  }
</script>

标签：vue,粘贴板,text,list,点击,clipboard,复制,data
来源： https://blog.csdn.net/weixin_43299180/article/details/112473038

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

vue 实现点击复制指定内容到粘贴板

vue-clipboard2

clipboard

原生方法