64 lines
1.4 KiB
Vue
64 lines
1.4 KiB
Vue
<template>
|
|
<div>
|
|
<el-divider>clipboard版</el-divider>
|
|
<span>{{ msg }}</span>
|
|
<div id="btn" @click="copy">复制</div>
|
|
<el-divider>OneKeyCopy组件版</el-divider>
|
|
<cute-one-key-copy style="margin-left: 10pt" :content.sync="msg" />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Clipboard from 'clipboard'
|
|
import CuteOneKeyCopy from '@/views/components/dev/CuteOneKeyCopy'
|
|
import CsMessage from '@/utils/elementui/CsMessage'
|
|
|
|
export default {
|
|
components: { CuteOneKeyCopy },
|
|
data() {
|
|
return {
|
|
msg: '来复制我吧'
|
|
}
|
|
},
|
|
methods: {
|
|
// 复制方法
|
|
copy() {
|
|
const that = this
|
|
const clipboard = new Clipboard('#btn', {
|
|
text(trigger) {
|
|
console.log(trigger)
|
|
// 返回字符串
|
|
return that.msg
|
|
}
|
|
})
|
|
// 复制成功
|
|
clipboard.on('success', (e) => {
|
|
CsMessage.Success('复制成功')
|
|
console.log(e, '复制成功')
|
|
clipboard.destroy()
|
|
})
|
|
// //复制失败
|
|
clipboard.on('error', (e) => {
|
|
CsMessage.Error('复制失败')
|
|
console.log(e, '复制失败')
|
|
clipboard.destroy()
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
#btn {
|
|
display: inline-block;
|
|
padding: 3px 12px;
|
|
border-radius: 6px;
|
|
background-color: #eee;
|
|
color: #333;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#btn:active {
|
|
background-color: #ddd;
|
|
color: #666;
|
|
}
|
|
</style>
|