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

女爷i 2023-01-05 03:59 295阅读 0赞

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

##### 1、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>

##### 2、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 属性值为你设置的固定内容。

##### 3、 原生方法 #####

原生方法也可以实现复制，但是兼容性不怎么好，有些浏览器不支持。主要是通过动态创建一个 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-clipboard2]: https://www.npmjs.com/package/vue-clipboard2
[clipboard]: https://www.npmjs.com/package/clipboard