发布：2024/1/10 17:28:05作者：管理员 来源：本站 浏览次数：178
input、textare、div中通过 copy（默认） / cut 获取内容目标内容（cut剪切只能在input和textare中起作用）
方法一：
一、安装依赖
1
npm install clipboard --save
二、main.js引入
import Clipboard from 'clipboard';
Vue.prototype.Clipboard = Clipboard
三、button按钮添加如下属性
data-clipboard-target指向复印节点，这里指input的目标id
data-clipboard-action这里使用copy，同时也可以使用cut，则点击按钮后，内容里的值被剪切。
:data-clipboard-text指定你的 v-mode数据 {{ code }}，@click方法是中需要使用id的值
四、完整代码
注意： 不用 :data-clipboard-text="code" 的话，可以使用 data-clipboard-action="copy/cut" 和 data-clipboard-target="#code"
以下两种写法皆可
clipboard.on("success", function (e) { });
clipboard.on("success", (e) => { });
复制代码
<template>
<div>
<div id="code">{{ code }}</div>
<button
id="copy_text"
ref="copy"
data-clipboard-action="copy"
:data-clipboard-text="code"
@click="copy"
>复制</button>
</div>
</template>
<script>
export default {
data() {
return {
code: "",
};
},
mounted() {},
methods: {
copy() {
var clipboard = new this.Clipboard("#copy_text");
clipboard.on("success", (e) => {
alert("复制成功");
clipboard.destroy();
});
clipboard.on("error", (e) => {
// 不支持复制
Message({
message: "该浏览器不支持自动复制",
type: "warning",
});
// 释放内存
clipboard.destroy();
});
},
},
};
</script>
复制代码
方法二：
无需下载依赖，直接在初始全局的 index.html 文件中，引用JS
<script src="https://cdn.jsdelivr.net/clipboard.js/1.6.1/clipboard.min.js">
© Copyright 2014 - 2024 柏港建站平台 ejk5.com. 渝ICP备16000791号-4