VUE 使用插件vue-clipboard2，对低版本进行优雅降级-CFANZ编程社区

VUE 使用插件vue-clipboard2，对低版本进行优雅降级

今天遇到一个需求，是点击复制按钮获取当前列表的档案号，然后复制这个获取到的档案号。复制的功能网上一搜，发现vue-clipboard2可以实现。但这里需要注意的是，如果你要复制没有特定按钮的文本请使用新方法this.$copyText。文档中有说明（所以还是要好好看文档）
GitHub

安装

npm install --save vue-clipboard2

main.js

import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

两种使用方法

方式一

<template>
  <a
      v-clipboard:copy="url"
      v-clipboard:success="onCopy"
      v-clipboard:error="onError"
  >复制</a >
</template>
<script>
  export default {
    data() {
      return {
       url:'https://github.com/Inndy/vue-clipboard2#readme'
      }
    },
    methods: {
      onCopy(e) {
        alert('复制成功' + e.text)
      },
      onError (e) {
        console.log(e)
        alert('复制失败')
      }
    }
  }
</script>

方式二

<template>
 <button  @click="copyUrl">复制</button>
</template>
<script>
  export default {
    data() {
      return {
       url:'https://github.com/Inndy/vue-clipboard2#readme'
      }
    },
    methods: {
      copyUrl() {
          //请求结果为res
          let foundCode = res.data.foundCode;
          this.$copyText(foundCode).then(
            res => {
              this.$message({
                message: '复制成功',
                type: 'success',
              });
            },
            err => {
              this.$confirm(
                '由于您的浏览器版本较低，请手动复制档号：' + foundCode,
                '提示',
                {
                  showConfirmButton: false,
                  showCancelButton: false,
                  type: 'warning',
                }
              );
            }
          );
      },
   
    }
  }
</script>