clipboard非同步複製文字,點選按鈕發起非同步請求進行復制
阿新 • • 發佈:2019-01-09
需求描述:
點選按鈕,發起一個非同步請求,將請求到的資料複製到剪下板。
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: '複製我的拓品連結成功' }); }); },