ホームページ  >  記事  >  ウェブフロントエンド  >  vue はコンテンツをクリップボードにコピーするメソッドを実装します

vue はコンテンツをクリップボードにコピーするメソッドを実装します

亚连
亚连オリジナル
2018-05-29 17:02:562826ブラウズ

ここで、コンテンツをクリップボードにコピーする Vue メソッドを共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

1. npm をプロジェクトディレクトリファイルにインストールします

npm install clipboard --save

2. HTML のカスタム属性を必要とするデータクリップボードにインポートします。 element コピーする内容を -text に記述します

import Clipboard from 'clipboard';

4 . JavaScriptのクラス名から要素内の内容を検索します。

<button class="copyBtn" :data-clipboard-text = "https://www.baidu.com/" type="text">复制地址</button>

このアドレスが必要な場合は、メソッド内でクリップボード変数を直接参照するだけで済みます。必要ない場合は、この変数について心配する必要はありません。 . クラス名 copyBtn のボタンをクリックした後、Ctrl+v を押すだけです。

関連記事:

jsでのDOMイベントバインディング解析

JavaScriptでよく使われる文字列操作メソッドと特殊文字

jQueryでの各メソッドの使い方を詳しく解説


以上がvue はコンテンツをクリップボードにコピーするメソッドを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。