コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > Vue はコンテンツをペーストボードにコピーするメソッドを実装します

Vue はコンテンツをペーストボードにコピーするメソッドを実装します

小云云
リリース： 2018-03-19 10:28:12
オリジナル
2480 人が閲覧しました

コンテンツをペーストボードにコピーするには?この記事では主に、Vue でコンテンツをクリップボードにコピーする方法について説明します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

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

npm install clipboard --save
ログイン後にコピー

2. 導入ファイルをインポートします

import Clipboard from 'clipboard';
ログイン後にコピー

3. html要素のカスタム属性にコピーするdata-clipboard-textを記述します。 

<button class="copyBtn" :data-clipboard-text = "https://www.baidu.com/" type="text">复制地址</button>
ログイン後にコピー

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

let clipboard = new Clipboard(&#39;.copyBtn&#39;);
ログイン後にコピー

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


JavaScript でコンテンツをペーストボードにコピーします。 code_javascript スキル


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

関連ラベル：
コンテンツ 方法 ペースト
ソース：php.cn
前の記事：CSSシークレットの使い方 次の記事：マージンフロート背景画像の使用方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1429
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1361
ページが突然 CSS またはブートストラップを取得できなくなります それで、私はページを開発しています。昨日その一部を実行してうまくいきました。そして今日は残りの作業を続けましたが、すべてがうまくいきました。通常の HTML ページとして開こうとす...
から 2024-04-06 21:58:04
0
1
800
Reactのsortメソッドでレンダリング(フィルターとページネーションを使用)をトリガーするにはどうすればよいですか? これが私の Sort.js スタイル コンポーネントです: <SortWrapper><SortText>SortBy</SortText>&l...
から 2024-04-06 21:28:37
0
1
2257
数独チェッカーが動作しないのですが？エラーの特定を手伝ってくれる人はいますか? オンラインエディターですべてを試しましたが、それでもエラーが発生します。しかし、私のマシンのVSCodeでこれを実行すると、正常に動作します。混乱していて、バグを見つけずにコードを...
から 2024-04-06 21:21:07
0
1
474
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート