[Vue.js]Clipboard APIを使ってOSのClipboardにアクセスする。 - Qiita
はじめに Vue.jsアプリケーションからクリップボードにアクセスする必要があったので、クリップボードAPIを使ったサンプルコードを作成してみました。クリップボードAPIの詳細は以下のリンクを参考にしてください。尚VueはV2系を使用しています。 実装した処理 今回、要件としてはクリップボードへの書き込みは不要でしたので、クリップボードからの読み込みのみを実装しています。（クリップボードへの書き込みを行う場合はClipboard.writeText()で可能です。） なおClipboard APIですがブラウザによって実装状況がかなり異なるため、処理をデバイス、ブラウザによって変更しています。ブラウザ、デバイスの切り分けにはUAParser.jsを利用しています。1 ソースコード <template> <div id="app"> <button v-on:click="showMessa
![[Vue.js]Clipboard APIを使ってOSのClipboardにアクセスする。 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/8e06c1406f0b9044735a7aa8f324f052b03e8f05/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnMzLWFwLW5vcnRoZWFzdC0xLmFtYXpvbmF3cy5jb20lMkZxaWl0YS1pbWFnZS1zdG9yZSUyRjAlMkYyMjY5NTMyJTJGMzA4ZDI0NTg4YzFjZmE3OTEyYWU1NjBiYmY4ZjRjZmM4ZjA1YWRjYSUyRmxhcmdlLnBuZyUzRjE2NTEyOTUzNjE_aXhsaWI9cmItNC4wLjAmYXI9MSUzQTEmZml0PWNyb3AmbWFzaz1lbGxpcHNlJmZtPXBuZzMyJnM9N2I5N2RlN2JkZTBiN2JhNDMxMDliNDRhZDEwNzliZDM%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D2e372ff3a4e5b6e3cef5d03609e79dcb%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCVnVlLmpzJTVEQ2xpcGJvYXJkJTIwQVBJJUUzJTgyJTkyJUU0JUJEJUJGJUUzJTgxJUEzJUUzJTgxJUE2T1MlRTMlODElQUVDbGlwYm9hcmQlRTMlODElQUIlRTMlODIlQTIlRTMlODIlQUYlRTMlODIlQkIlRTMlODIlQjklRTMlODElOTklRTMlODIlOEIlRTMlODAlODImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtcGFkPTAmcz1jNjc3ODgzMWQ0MmM5MmY1ZmQ2MzMyMmIyYTIxZTM0Nw%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBhcmFrYXdheWFzdWFraSZ0eHQtY29sb3I9JTIzMUUyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1wYWQ9MCZzPWIwZWI4MjZkOTE2NWY5OTdlYjRhNDgyMWRhNTdjMGUy%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D5f115761e2e913934d308a9767191c4a)
vue-clipboard2をVuetifyのv-dialogの中で動かす - Qiita
<template> <v-dialog> <v-card> <v-card-text> <v-text-field :value="textToCopy" readonly/> <v-btn icon ref="copyBtn" @click="onCopy"><v-icon>mdi-content-copy</v-icon></v-btn> </v-card-text> </v-card> </v-dialog> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator'; @Component export default class SampleDialog extends Vue { textToCopy = 'some text to copy'; private
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
