怎么引入clipboard.js,这里不再介绍了,直接说问题:
想要复制请求回来的url,但是初次必须点击两次才复制成功,之后点击一次即可。不知道什么原因......
成功代码:
- 在template标签中(此为循环创建的复制按钮):
<el-button :id="'copyVideoUrl' + props.$index" class="btn-common copy-video-btns"
type="primary" size="small" @click="copyVideoUrl(props.$index,props.row)">
<span>复制地址</span>
</el-button>
-
在script标签中 methods:{ copyVideoUrl(index,row){ const thisObj = this; //post请求,此为自己封装的 commonJs.commObj.httpPost(this,url,params,function (res) { thisObj.$notify.closeAll(); if(res.data.result.resultCode == responseCode.SUCCESS_FULLY)){ if(res.data.livePlayUrl){ let clipboardVideo = new Clipboard(".copy-video-btns"); let copyUrlBtn = document.getElementById('copyVideoUrl' + index); copyUrlBtn.setAttribute("data-clipboard-text", res.data.livePlayUrl); clipboardVideo.on('success', e => { thisObj.$notify({ title: '复制成功', message: '已复制播放地址', type: 'success', position: 'bottom-right', duration:2000, showClose: false }); // 释放内存 clipboardVideo.destroy() }); clipboardVideo.on('error', e => { // 不支持复制 commonJs.logger.debug('复制失败') clipboardVideo.destroy() }); } } },function (error) { commonJs.logger.debug(error); })
}
}
参考:https://blog.csdn.net/qq_38594215/article/details/78800749