vue 移动端开发实现点击复制(clipboard)

1 引入模板clipboard
官网: https://www.npmjs.com/package/vue-clipboard#installation

npm install clipboard --save

2 使用的地方引入
引包

import Clipboard from 'clipboard'

HTML

<div  class="code"  :data-clipboard-text="userInfo.account"  @click="copy">
        <div>{{userInfo.account}}</div>
        <div>(点击复制)</div>
      </div>

方法

    /**
   * 复制功能
   */
    copy () {
      var clipboard = new Clipboard('.code')
      clipboard.on('success', e => {
        console.log('复制成功', e)
        Toast({
          message: '复制成功'
        })
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        Toast({
          message: '手机权限不支持复制功能'
        })
        console.log('该浏览器不支持自动复制')
        // 释放内存
        clipboard.destroy()
      })
    },
发布了70 篇原创文章 · 获赞 67 · 访问量 4万+

猜你喜欢

转载自blog.csdn.net/qq_37896578/article/details/100853680