<template>
<div class="hello">
<el-button type="primary" id="copy" @click="copy" :data-clipboard-text="copyContent">複製</el-button>
</div>
</template>
<!--clipboard實現複製功能-->
<!-- npm install clipboard --save -->
<script>
import Clipboard from 'clipboard';
export default {
name: 'HelloWorld',
props: {
msg: String
},
data() {
return {
clipboard: new Clipboard("#copy"),
copyContent:"這是複製的內容"
}
},
methods: {
copy() {
let _this = this;
_this.clipboard.on('success', function () {
_this.$message.success('複製成功')
_this.clipboard.destroy();
_this.clipboard = new Clipboard("#copy");
});
_this.clipboard.on('error', function () {
_this.$message.error('複製失敗,請手動複製')
})
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>