vue通过v-clipboard实现复制功能

安装

npm install clipboard --save 
或
cnpm i clipboard -S

// 引用
import Clipboard from 'clipboard';

• v-clipboard:copy - copy 要复制的内容 cut 要剪贴的内容
• v-clipboard:success 复制或剪贴成功的回调函数
• v-clipboard:error 复制或剪贴失败的回调函数

  <a-modal
    v-model="visible"
    title="链接"
    @ok="handleOk"
  >
    <template #footer>
      <a-button key="submit" type="primary" @click="handleOk">好的</a-button>
    </template>
    <p>分享链接可以邀请其他人</p>
    <p>
      <a-tag color="blue">{{ roomShareUrl }}</a-tag>
      <a class="fs12" v-clipboard:copy="roomShareUrl" v-clipboard:success="onCopy">复制
      </a>
    </p>
  </a-modal>

  data() {
    return {
      visible: false,
      roomShareUrl: ''
    }
  }, 
 methods: {
    // 初始化方法
    show(roomId) {
      roomShare(roomId).then(res => {
        if (res.success) {
          this.visible = true
          console.log(res.data)
          this.roomShareUrl = res.data
        }
      })
    },
    handleOk() {
      this.roomShareUrl = ''
      this.visible = false
    },
    onCopy: function(e) {
      message.success('复制成功')
    }
  }