vueはコピー関数のクリップボードコンポーネントのカプセル化メソッドを実装します

(1)npmのインストール

npm install clipboard --save

(2)clipboard.jsファイルをカプセル化してman.jsにマウントする

import Clipboard from 'clipboard'
import {
    
     message } from 'ant-design-vue'

export default function (e, text) {
    
    
  const clipboard = new Clipboard('info', {
    
     text: () => text }) // info 是输入框的 id
  clipboard.on('success', () => {
    
    
    message.success(`复制成功!`);
    clipboard.destroy();
  })
  clipboard.on('error', () => {
    
    
    message.error(`复制失败!`);
    clipboard.destroy();
  })
  clipboard.onClick(e);
}

(3) パッケージの構成要素

<template>
  <div class="copy-input">
    <input readonly="readonly" id="info" :value="text" />
    <button class="btn" @click="onCopy($event,text)">
      <a-icon type="copy" />
    </button>
  </div>
</template>
<script>
export default {
    
    
  props: {
    
    
    text: {
    
    
      type: [String],
      default: null
    }
  },
  methods: {
    
    
    onCopy (e, text) {
    
    
      this.$clipboard(e, text);
    },
  }
}
</script>

(4) 電話をかける

<a-card class="card"
        :bordered="false">
  <div class="item"
       v-for="(item,i) in list"
       :key="i">
    <copy-input :text='item.text'></copy-input>
  </div>
</a-card>