clipboard 在 vue 中的使用

简介

页面中用 clipboard 可以进行复制粘贴，clipboard能将内容直接写入剪切板

安装

npm install --save clipboard

使用方法一

<template><span>{{ code }}</span><iclass="el-icon-document"title="点击复制"@click="copyActiveCode($event,code )"/> </template> // methods copyActiveCode(e, text) {const clipboard = new Clipboard(e.target, { text: () => text })clipboard.on('success', e => {this.$message({ type: 'success', message: '复制成功' })// 释放内存clipboard.off('error')clipboard.off('success')clipboard.destroy()})clipboard.on('error', e => {// 不支持复制this.$message({ type: 'waning', message: '该浏览器不支持自动复制' })// 释放内存clipboard.off('error')clipboard.off('success')clipboard.destroy()})clipboard.onClick(e)}

使用方法二

<template><span>{{ code }}</span><iid="tag-copy" <-- 作为选择器的标识使用用class也行 -->:data-clipboard-text="code" <-- 这里放要复制的内容 -->class="el-icon-document"title="点击复制"@click="copyActiveCode($event,code)"/> </template> // methods copyActiveCode() {const clipboard = new Clipboard("#tag-copy")clipboard.on('success', e => {this.$message({ type: 'success', message: '复制成功' })// 释放内存clipboard.destroy()})clipboard.on('error', e => {// 不支持复制this.$message({ type: 'waning', message: '该浏览器不支持自动复制' })// 释放内存clipboard.destroy()})}

总结

以上是生活随笔为你收集整理的clipboard 在 vue 中的使用的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。