ユーザーに最も便利で効率的なエクスペリエンスを提供し、同僚にソース コード内の明確で便利な操作手順を提供する。
それほどナンセンスではありません --- 最後のステップ:
ステップ 1: 専門家なら知っている: まずプラグインをダウンロードする
npm install --save vue-clipboard2
ステップ 2:プロジェクトのmanにインポートしてマウントする
3 番目のステップ: 使用する必要があるページに移動します。
<template>
<div class="container">
<div id="target">
{
{ list }}
</div>
<button type="button" @click="copy">复制</button>
</div>
</template>
<script>
export default {
data() {
return {
list: "赵同同",
};
},
methods: {
copy() {
// let text=document.getElementById('target').innerText; //获取div中的数据进行复制
let text = this.list; //拿到data中的list数据进行复制
this.$copyText(text).then(
(e) => {
console.log(e);
this.$message({
showClose: true,
message: "恭喜你, 获取成功",
type: "success",
});
},
(e) => {
console.log(e);
this.$message({
showClose: true,
message: "错了哦,获取失败",
type: "error",
});
}
);
},
},
};
</script>
ブラウザのレプリケーションにネイティブに依存して実装します。
不十分:互換性があまり良くなく、一部のブラウザではサポートされていません --- 上記のプラグイン形式を使用して実装することをお勧めします。
<template>
<div class="container">
<div id="target">
{
{ list }}
</div>
<button type="button" @click="copyText">复制</button>
</div>
</template>
<script>
export default {
data() {
return {
list: "赵同同",
};
},
methods: {
copyText() {
// let text=document.getElementById('target').innerText; //获取div中的数据进行复制
let text=this.list; //拿到data中的list数据
let inputElement = document.createElement("input"); //模拟输入框
inputElement.value = text; //将需要获取得值赋给我们模拟得输入框
document.body.appendChild(inputElement); //appendChild追加
inputElement.select(); //选中文本
document.execCommand("copy"); //执行浏览器得复制命令copy
inputElement.remove(); //清楚模拟的输入框 / 由此释放内存
this.$message({ //提示
showClose: true,
message: "恭喜你, 复制成功",
type: "success",
});
},
},
};
</script>