vue 复制按钮功能

安装插件

npm install --save vue-clipboard2

项目引用

import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

代码实现

<template>
  <div class="container">
    <a-button
            v-clipboard:copy="'随便复制点啥东西'+detail.path"
            v-clipboard:success="onCopy"
            v-clipboard:error="onError">复制
    </a-button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      detail:{
        path: "http://baidu.com"
      }
    }
  },
  methods: {
    onCopy: function (e) {
      alert('复制成功: ' + e.text)
    },
    onError: function (e) {
      alert('复制失败'+ e.text)
    }
  }
}
</script>

效果

image.png

image.png