需求描述:
点击按钮,发起一个异步请求,将请求到的数据复制到剪切板。
emmmmm半天尝试了很多百度来的方法,都不能满足需求,后面使用了Clipboard.js动态设置文本的方法和把ajax请求设置为同步的,实现了异步的复制。
直接看实现代码:
<b-button id="LinkBtn" class="myLinkBtn btn" @click="CopyMyLink" :width="150">我的拓品链接</b-button>
CopyMyLink(){
let self = this;
$.ajax({
url: 'http://local.beibei.com/api/common_verify/create_expand_url',
type: 'get',
async: false,
success: function(res) {
if(res.success) {
console.log(res);
$("#LinkBtn").data('url', res.data.url);
} else {
this.$message({
type: 'warning',
message: res.message ||'获取链接失败~'
});
}
}
});
const clipboard = new Clipboard('.btn', {
text: function() {
return $("#LinkBtn").data('url');
}
});
clipboard.on('success', function(e) {
self.$message({
type: 'success',
message: '复制我的拓品链接成功'
});
});
},