写入和读取剪切板内容

写入剪切板

使用 clipboard.js 第三方插件:

clipboard.js

安装clipboard.js

yarn

yarn add clipboard

npm

npm install clipboard --save

使用示例(vue)

<template>
	<div>
	 <span v-copy>复制这段文本</span>
 </div>
</template>
<script>
import ClipboardJS from "clipboard";
export default {
	directives: {
	copy: {
	 bind(el, binding, vnode) {
	 // 获取vue实例
	 const that = vnode.context;
	 // 1-监听点击的元素
	 that.handleCopy(el);
	 },
	}
	},
	methods: {
	handleCopy(element) {
 // 2-实例化剪切板对象,指定要复制文本的元素
 const clipboard = new ClipboardJS(element, {
 /**
 * 动态获取要复制的文案
 * @param {HTMLElement} trigger 监听点击的元素
 * @return {string} 要复制的文案
 */
 text: function(trigger) {
 return trigger.innerText;
 }
 });
 // 3-结果回调
 clipboard.on('success', function(e) {
 console.info('e= :', e);
 // 清除文字的选中状态
 e.clearSelection();
 });
 clipboard.on('error', function(e) {
 console.error('Action:', e.action);
 console.error('Trigger:', e.trigger);
 });
 },
	}
}
</script>

这里使用了vue的自定义指令,

  • 指令第一次绑定到元素时,监听元素的点击(复制)事件。
  • 点击元素时,执行text函数,并将结果(字符串)写入剪切板。
  • 写入成功,执行success回调函数;写入失败,执行error回调函数。

原生API

可以使用原生API:Clipboard.writeText()实现写入剪切板。

var promise = navigator.clipboard.writeText(newClipText)
  • newClipText:写入的内容

其它API

  • Clipboard: write():该方法理论上可以写入任意数据(与writeText()不同,后者只能写入文本)。浏览器通常支持编写文本、HTML和PNG图像数据

读取剪切板

<template>
	<div>
	 <p @click="getClipboard">读取剪切板</p>
	 <p>{{ content }}</p>
 </div>
</template>
<script>
export default {
	data() {
	return {
	content: '',
	}
	},
	methods: {
	async getClipboard() {
 // 读取剪切板
 const clipboardContent = await navigator.clipboard.readText();
 this.content = clipboardContent;
 },
	}
}
</script>

使用原生API:Clipboard.readText() 即可。

其它API

  • Clipboard: read() :该方法理论上可以返回任意数据与readText()不同,后者只能返回文本)。浏览器通常支持读取文本、HTML和PNG图像数据
作者:前端cry原文地址:https://www.cnblogs.com/cry0-0/p/18086370

%s 个评论

要回复文章请先登录注册