clipboard.js 在 vue.js 中使用
本文以 vue 3 为例，vue 2 同理。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>clipboard.js 在 vue.js 中使用</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="item in list">
{{item}}
<button class="btn-cp" :value="item">复制</button>
</li>
</ul>
</div>
<script src="//xxx/vue/core-3.x.x/vue.global.js"></script>
<script src="//xxx/clipboard/clipboard.js-2.x.x/dist/clipboard.min.js"></script>
<script>
const app = Vue.createApp({
data: function () {
return {
list: ["aaa", "bbb", "ccc"]
}
},
mounted: function () {
var clipboard = new ClipboardJS('.btn-cp', {
text: function (trigger) {
return trigger.getAttribute('value');
}
});
clipboard.on('success', function (e) {
alert('已复制“' + e.text + '”到粘贴板');
e.clearSelection();
});
}
});
const vm = app.mount('#app');
</script>
</body>
</html>
可能相关的内容
