- 安装 npm i clipboard -S
- 在需要使用的页面中引入 import clipboard from 'clipboard'
- 在mouted钩子中实例化clipboard
上代码:
html部分:
<div class="share-way-list">
<div class="share-way">
<input type="text" v-model="link" id="copy_link">
<img class="linkBtn" src="../assets/images/icon_link.png" @click="copyLick" data-clipboard-target="#copy_link" alt />
</div>
</div>
js部分:
// 完成挂载,相当于dom ready
mounted () {
let self = this
self.clipboard = new Clipboard('.linkBtn', {
text: () => self.link // 返回需要复制的内容
})
// this.clipboard = new Clipboard('.linkBtn')
window.myapi.do_post('frontSystem/isSystemManager/' + self.$store.state.currentSystemId).then(res => {
if (res.data === false) {
self.isShare = false
}
})
},
methods: {
copyLick () {
let _this = this
this.clipboard.on('success', function () {
// console.log(_this.link)
_this.$toast('复制成功')
})
this.clipboard.on('error', function () {
_this.$toast('复制失败,请重试')
})
}
}
网友评论