vue の js は、クリックしてテキストをクリップボードにコピーすることを実装します。3 つのソリューション

インターネット上で厄介で適用できないものを見つけたので、レコードを作成し、それを
vue の js で共有し、クリックしてテキストをクリップボードにコピーしました。3 つの解決策

効果：
ここに画像の説明を挿入

解決策 1: ネイティブ API (クリップボード) を使用する

まず、クリップボードライブラリをインストールする必要があります。これは、テキストをクリップボードにコピー/ペーストするための軽量の JavaScript ライブラリです。

コマンドラインで npm install Clipboard --save を実行してインストールします。

 npm install clipboard --save

このライブラリを使用した実装コードは次のとおりです。

<template>
  <div>
    <button @click="copyText">复制文本</button>
  </div>
</template>

<script>
import clipboard from 'clipboard';

export default {
    
    
  methods: {
    
    
    copyText() {
    
    
      let text = 'Hello World';
      clipboard.writeText(text);
      alert('已复制到剪贴板！');
    }
  }
}
</script>

解決策 2: v-copy コマンドを使用する

vue ディレクティブを使用して、要素がテキストをクリップボードにコピーできるようにすることができます。

<template>
  <div>
    <button v-copy="text">复制文本</button>
  </div>
</template>

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      text: 'Hello World'
    }
  }
}
</script>

// 注册指令
Vue.directive('copy', {
    
    
  bind: function(el, binding) {
    
    
    el.$copy = function() {
    
    
      const textarea = document.createElement('textarea');
      textarea.value = binding.value;
      document.body.appendChild(textarea);
      textarea.select();
      document.execCommand('Copy');
      document.body.removeChild(textarea);
    }
    el.addEventListener('click', el.$copy);
  },
  unbind: function(el) {
    
    
    el.removeEventListener('click', el.$copy);
  }
});

解決策 3:clipboard.js ライブラリを使用する

Clipboard.js ライブラリは、テキストをクリップボードにコピーする機能を実現するためにインストールして使用できる既製のプラグインです。

コマンドラインで npm install Clipboard --save を実行してインストールします。

npm install clipboard --save

次のように、clipboard.js を使用してコードを実装します。

<template>
  <div>
    <button class="copy-btn" data-clipboard-text="Hello World">复制文本</button>
  </div>
</template>

<script>
import ClipboardJS from 'clipboard';

export default {
    
    
  mounted() {
    
    
    new ClipboardJS('.copy-btn');
  }
}
</script>

解決策 3:clipboard.js ライブラリを使用する (vue3 バージョン)

Clipboard.js ライブラリをインストールする
npm または Yarn を使用して、clipboard.js をインストールできます。コマンドは次のとおりです。

npm i clipboard
# 或者
yarn add clipboard

完全なコードは次のとおりです。

<template>
  <button class="copy-btn">复制</button>
</template>

<script setup>
import {
    
     onMounted, ref } from 'vue'
import ClipboardJS from 'clipboard'

const clipboardText = ref('hello world')
const copyText = () => {
    
    
  const clipboard = new ClipboardJS('.copy-btn', {
    
    
    text() {
    
    
      return clipboardText.value
    }
  })
  clipboard.on('success', () => {
    
    
    console.log('复制成功')
  })
  clipboard.on('error', () => {
    
    
    console.log('复制失败')
  })
}

onMounted(() => {
    
    
  copyText()
})
</script>

上記の 3 つのスキームはいずれもテキストをクリップボードにコピーする機能を実現できますが、特定のアプリケーションでは、実際の状況に応じて適切なスキームを選択できます。