ホーム > Vue > v-dialogの中でVueClipboardを使う方法【Vue3、Vue2対応】
Vue

v-dialogの中でVueClipboardを使う方法【Vue3、Vue2対応】

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

目次

  1. はじめに
  2. 結論
  3. 全てのコード
  4. まとめ
PR

Vue の CSS フレームワーク Vuetify の v-dialog 内で、vue-clipboard を使ってクリップボードにテキストをコピーする方法についてまとめました。

Vuetify v-dialog

vue-clipboard3

はじめに

v-dialog 内だと、window の参照が変わってしまう仕様であるため、クリップボードの機能が正常に動きませんでした。

そこで、window の参照を変えないという記述が必要になります。

結論

retain-focus を無効にする

<v-dialog :retain-focus="false"></v-dialog>

または、クリップボードの参照を変えます

１行追加すれば動きます。

export default {
  methods: {
    onCopy: function (text) {
      const dialog = document.querySelector(".v-dialog") // ここ
      this.$copyText(text, dialog).then(() => {
        //↑ここ
        console.log("コピー完了後")
      })
    },
  },
}

全てのコード

Vue3 のとき

<script setup>
import { ref, onMounted } from "vue"
import useClipboard from "vue-clipboard3"

const { toClipboard } = useClipboard()
const isOpenModal = ref(false)
const text = ref("コピーしたいテキスト")

function open() {
  isOpenModal.value = true
}

async function copy() {
  try {
    console.log(text)
    await toClipboard(text.value)
    console.log("Copied to clipboard")
  } catch (e) {
    console.error(e)
  }
}
</script>

<template>
  <div>
    <div>
      <v-btn @click="open">開く</v-btn>
    </div>
    <v-dialog :retain-focus="false" v-model="isOpenModal">
      <v-card>
        <div>{{ text }}</div>
        <v-btn @click="copy">コピーする</v-btn>
      </v-card>
    </v-dialog>
  </div>
</template>

Vue2 のとき

<template>
  <v-btn small text color="blue" @click="onCopy(text)"> コピー </v-btn>
</template>

<script>
  export default {
    data() {
      return {
        text: "コピーするテキスト",
      }
    },
    methods: {
      onCopy: function (text) {
        //この１行があると動く
        const container = document.querySelector(".v-dialog")
        this.$copyText(text, container).then(() => {
          console.log("コピー完了後")
        })
      },
    },
  }
</script>

参考

GithubIssue

まとめ

誰かの参考になれば幸いです。

フィードバックのお願い
この記事のフィードバックがありましたらYoutubeの適当な動画にコメントしていただいたり、お問い合わせからご連絡ください。