vue中实现复制粘贴功能

最近在项目中遇到点击按钮复制链接功能，将其总结如下：

$安装$

npm install vue-clipboard2 --save

$引入$

在main.js中引入以下代码：

import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

$使用$

• template中

  <v-btn class="btn_style" text v-clipboard:copy="domain+node.path" v-clipboard:success="onCopy" v-clipboard:error="onError"> Share </v-btn>
  
  <!-- 复制链接弹框 -->
  <v-dialog v-model="show" max-width="290">
    <v-card>
      <v-card-title>{{this.tipInfo}}</v-card-title>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="info" text @click="show = false">
          确定
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
  

  注意：我使用的是vuetify组件，可以将第一行代码换为以下代码：

  <div v-clipboard:copy="domain+node.path" v-clipboard:success="onCopy" v-clipboard:error="onError">share</div>
  

  解析：

  • v-clipboard:copy：是要复制的链接。
  • v-clipboard:success="onCopy"：是复制成功的方法。
  • v-clipboard:error="onError"：是复制失败的方法。

• methods中

  methods: {
      // 复制成功
      onCopy() {
        this.show = true;
        this.tipInfo = "链接复制成功";
      },
      // 复制失败
      onError() {
        this.show = false;
        this.tipInfo = "链接复制失败";
      }
   }
  

$结果$