点击复制文字

点击复制文字

老规矩先放传送门

url:https://github.com/zenorocha/clipboard.js

上面这一个是剪切板组件

贴上我的vue demo

<template>
  <div class="home">
    <!-- Trigger -->
    <button class="btn_copy" @click="test()">Copy</button> // 简单的点击事件
  </div>
</template>

<script>
// @ is an alias to /src
import Clipboard from 'clipboard'  // 引入剪切板插件

export default {
  name: 'home',
  data() {
    return {
      url: "123456789" // 要输出的数字
    }
  },
  components: {

  },
  mounted() {
    // this.test()
  },
  methods: {
    test() {
      var clipboard = new Clipboard('.btn_copy', {
        text: ()=> {
          return this.url; // 这里可以直接写成字符串,用this.url 可以灵活一点
        }
      })
		// 数据监听,可以输出
      clipboard.on('success', function (e) {
        console.log(e);
      });
		// 监听错误
      clipboard.on('error', function (e) {
        console.log(e);
      });
    }
  },
}
</script>

我们来点击一下 ctrl +v

这样就成功了

大家有问题可以留言