使用前提:了解各个属性
***1.data-clipboard-action=""属性来指明 复制（copy）还是剪切（cut）内容。
如果你省略这个属性，则默认为复制（copy）。cut只能在input和textare中起作用.
***2.data-clipboard-target指向复印节点，这里指input的目标id ;
***3.好消息是，如果你需要支持旧浏览器，clipboard.js 可以优雅降级。你所要做的就是在
success 事件触发时提示用户“已复制！”，error 事件触发时提示用户“按 Ctrl+C 复制文字”
（此时用户要复制的文字已经选择了）。
***4.你也可以通过运行 Clipboard.isSupported() 来检查浏览器是否支持 clipboard.js，如果不支持，
你可以隐藏复制/剪切按钮。
↓↓
1.npm install --save clipboad
↓↓
2.import Clipboad from "clipboad";
或者 <script src="https://cdn.bootcss.com/clipboard.js/2.0.1/clipboard.js"></script>
↓↓
3.html元素(input、textare、div中通过copy/cut获取内容目标内容):
方法一:从另一个元素复制文本
<input id="foo" v-model="text" style="position:absolute;opacity:0;">
<button id="copyUrl" @click="shareUrl" data-clipboard-target="#foo"></button>
方法二:从另一个元素剪切文本
<input id="foo" v-model="text" style="position:absolute;opacity:0;">
<button id="copyUrl" @click="shareUrl" data-clipboard-action="cut" data-clipboard-target="#foo"></button>
方法三:通过target，text的function复印内容.
<button class="btn">Copy_target</button>
<div>hello</div>
var clipboard = new Clipboard('.btn', {
// 通过target指定要复印的节点
target: function() {// 注意this指向的问题
return document.querySelector('div');
};
或者
text: function() {// 注意this指向的问题
return 'to be or not to be';
}
});
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
方法四:通过data-clipboard-text属性返回复印的内容.
<div id="btn" data-clipboard-text="1">
<span>Copy</span>
</div>
var btn = document.getElementById('btn');
var clipboard = new Clipboard(btn);
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
);
方法五:多节点获取button的data-clipboard-text值.
<button data-clipboard-text="1">Copy</button>
<button data-clipboard-text="2">Copy</button>
<button data-clipboard-text="3">Copy</button>
var btns = document.querySelectorAll('button');
var clipboard = new Clipboard(btns);
*******通过button返回所有button按钮，并做为参数传送给Clipboard。每个按钮被点击时，
返回值的内容是其对应的data-clipboard-text的内容，分别是1，2，3.
↓↓
4.方法一,方法二的js
shareUrl(){
let clipboard = new Clipboard('#copyUrl');// 实例化对象
clipboard.on('success', function(e) {
Toast({
message:"Successfully copied to the Clipboard! ",
duration:1200
});
e.clearSelection();// 清空粘贴区
});
clipboard.on('error', function(e) {
Toast({
message:"Copy failed, please select Copy manually! ",
duration:1200
});
});
},
↓↓
5.1---如果你希望动态设置 target，你需要返回一个节点（Node）.
new Clipboard('.btn', {
target: function(trigger) {
return trigger.nextElementSibling;
}
});
5.2---如果你希望动态设置 text，你需要返回一个字符串。
new Clipboard('.btn', {
text: function(trigger) {
return trigger.getAttribute('aria-label');
}
});
5.3---如果在 Bootstrap 模态框（Modals）中使用，或是在其他修改焦点的类库中使用，你会希望将获得
焦点的元素设置为 container 属性的值。
new Clipboard('.btn', {
container: document.getElementById('modal')
});
5.4---同样地，如果你使用单页应用，你可能想要更加精确地管理 DOM 的生命周期。你可以清理事件
以及创建的对象。
var clipboard = new Clipboard('.btn');
clipboard.destroy();
↓↓
clipboard.js支持主流的浏览器：chrome 42+; Firefox 41+; IE 9+; opera 29+; Safari 10+;
详细请查看官网: https://clipboardjs.com/#example-action
原生js还有一个方法: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand.
===================快速实现复制到剪贴板：
<p>点击复制后在右边textarea CTRL+V看一下</p>
<input type="text" id="inputText" value="测试文本"/>
<input type="button" id="btn" value="复制"/>
<textarea rows="4"></textarea>
<script type="text/javascript">
var btn = document.getElementById('btn');
btn.addEventListener('click', function(){
var inputText = document.getElementById('inputText');
var currentFocus = document.activeElement;
inputText.focus();
inputText.setSelectionRange(0, inputText.value.length);
document.execCommand('copy', true);
currentFocus.focus();
});
</script>