移动端浏览器一键复制神器之ClipboardJS

网址

https://clipboardjs.com/

引入方式

通过npm安装clipboardjs或者直接下载zip包，将js文件拷贝到你的插件目录，如 static/plugin 下
在index.html文件中引入该js插件，如：

  <script src="./static/plugin/clipboard.min.js"></script>

使用方式

• 触发复制这一动作的元素上要设置id，clipboard在初始化的时候需要。如下

html

 <span id="copy" class="copy-btn" :data-clipboard-text="inviteCode"  @click="copyTxt">
      复制 
  </span>

js

new ClipboardJS('#copy')

• 需要复制的文字需要在html中加上data-clipboard-text属性

 <span id="copy" class="copy-btn" :data-clipboard-text="inviteCode"  @click="copyTxt">

vue开发源码

假设你是用vue开发，代码如下：

<template>
   <div class="invite-code center">
      <p class="invite-code-bg">邀请码：{{inviteCode}} 
      <span id="copy" class="copy-btn" :data-clipboard-text="inviteCode"  @click="copyTxt">
      复制 
      </span>
      </p>
  </div>
</template>

<script>
export default {
  name: '',

  mixins: [],

  components: {},

  props: {},

  data () {
    return {
     inviteCode:'123456789',
      clipboard: null,
    }
  },

  computed: {},

  watch: {},

  created () {},

  mounted () {
    this.clipboard = new ClipboardJS('#copy')
  },

  destroyed () {},

  methods: {
    /** 复制邀请码 */
    copyTxt () {
      const self = this
      this.clipboard.on('success', function (e) {
        e.clearSelection()
        self.showToast('复制成功，赶紧去邀请把！')
      })

      this.clipboard.on('error', function (e) {
        console.error('Action:', e.action)
        console.error('Trigger:', e.trigger)
        self.showToast('浏览器不兼容，复制失败啦')
      })
    }
  }
}
</script>

<style scoped>

</style>