21.11.21 - TIL [Vue - clipboard]
現在のアドレスをクリップボードにコピー
ライブラリvueクリップボード2の使用
vueクリップボード2ガイド
1.vueクリップボードのインストール
端末に以下の内容を入力し、パッケージ化します.jsonにインストールされていることを確認します.npm install --save vue-clipboard2
2.VUEにアップロードして使用する。
main.jsにvueクリップボード2でインポートします.
Vueにインポートします.useを登録してvueで使用できます!
index.htmlにスクリプトvue.min.js
を追加します.import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
VueClipboard.config.autoSetContainer = true;
Vue.use(VueClipboard)
<script src="vue.min.js"></script>
3.実装関数
ボタンをクリックしたときに現在のアドレスをコピーする関数を実装
現在のアドレスは、window.location.href
によってhomeLink変数に格納される<template>
<div id="app">
<button type="button" @click="urlLink">Copy!</button>
</div>
</template>
<script>
export default {
data() {
return {
homeLink: window.location.href,
};
},
methods: {
urlLink() {
this.$copyText(this.homeLink).then(function () {
alert("복사되었습니다.");
});
},
},
}
</script>
振り返る
進行中の項目で使用した機能.
ライブラリを使用しているので、簡単なコードでクリップボード機能を実現できるので便利です.以前はdocument.execCommand
で実現された機能を使用していましたが、推奨されません.次回はclipboard.jsで実現します.
Reference
この問題について(21.11.21 - TIL [Vue - clipboard]), 我々は、より多くの情報をここで見つけました
https://velog.io/@sjkim_jinnyk/21.11.21-TIL
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
npm install --save vue-clipboard2
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
VueClipboard.config.autoSetContainer = true;
Vue.use(VueClipboard)
<script src="vue.min.js"></script>
<template>
<div id="app">
<button type="button" @click="urlLink">Copy!</button>
</div>
</template>
<script>
export default {
data() {
return {
homeLink: window.location.href,
};
},
methods: {
urlLink() {
this.$copyText(this.homeLink).then(function () {
alert("복사되었습니다.");
});
},
},
}
</script>
進行中の項目で使用した機能.
ライブラリを使用しているので、簡単なコードでクリップボード機能を実現できるので便利です.以前は
document.execCommand
で実現された機能を使用していましたが、推奨されません.次回はclipboard.jsで実現します.Reference
この問題について(21.11.21 - TIL [Vue - clipboard]), 我々は、より多くの情報をここで見つけました https://velog.io/@sjkim_jinnyk/21.11.21-TILテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol