URLをコピーし、クリップボードを使用してのVue

URLをコピーし、クリップボードを使用してのVue

クリップボードには、純粋なJavaScriptを達成するために、他のフレームワークに依存しないが、システムのクリップボード機能にブラウザの内容をコピーし、フラッシュに依存しない軽量なフレームワークです。

cliboardをインストール1.

npm install clipboard --save

2.プロジェクトの導入と注入さVUE

import clipboard from 'clipboard'

Vue.prototype.ClipboardJS = clipboard;

3.buttonボタン

<Button @click="share()" id="copyUrl" data-clipboard-action="copy"><Icon type="md-share-alt" />分享</Button>

4.イベントの呼び出し

share(){
    var _val=window.location.href;
    new this.ClipboardJS('#copyUrl', {
     	text: function() {
             return _val;
     	}
    });
}

ここで最初のパラメータはセレクタでCliboardJS（DOMセレクタ、HTML要素、またはHTML要素のリスト。）、二番目の引数が返されたテキストです。