1. 程式人生 > >clipboard非同步複製文字,點選按鈕發起非同步請求進行復制

clipboard非同步複製文字,點選按鈕發起非同步請求進行復制

需求描述:

點選按鈕,發起一個非同步請求,將請求到的資料複製到剪下板。

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: '複製我的拓品連結成功' }); }); },