H5移动端复制功能实现

1、vue项目中可使用vue-clipboard2,iOS 10.0以下版本不支持
npm安装:npm install vue-clipboard2 --save

// main.js
import Vue from 'vue'
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

// page.vue
<img src="../../../static/images/xxx.png" alt="" class="icon-copy" v-clipboard:copy="item.ticketNo" v-clipboard:success="onCopy" v-clipboard:error="onError">

methods:{
  onCopy() {
    Toast({
      message: '复制成功',
      duration: 1000
    })
  },
  onError() {
    Toast({
      message: '复制失败',
      duration: 1000
    })
  },
}

2、clipboard 官网👉(http://www.clipboardjs.cn/
npm安装:npm install clipboard --save
页面中引用(vue项目举例):

<button class="icon-copy" :data-clipboard-text="ticketNo" @click="copy">copyNo</button>

import ClipboardJS from 'clipboard';

methods:{
 copy() {
  let clipboard = new ClipboardJS('.icon-copy');

  clipboard.on('success', function (e) {
    console.log('succ', e)
    Toast({
      message: '复制成功',
      duration: 1000
    })
    clipboard.destroy();
  })
  clipboard.on('error', function (e) {
    Toast({
      message: '复制失败',
      duration: 1000
    })
    clipboard.destroy();
  })
 },
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,117评论 0 2
  • 什么是 NPM npm之于Node,就像pip之于Python,gem之于Ruby,composer之于PHP。 ...
    ihoey阅读 6,275评论 2 36
  • NPM笔记: 名字的含义: 1、是Node的开放式模块登记和管理系统 2、Node默认的模块管理器,是一个命令行下...
    名字神马的都是浮云阅读 901评论 0 3
  • ## 框架和库的区别?> 框架(framework):一套完整的软件设计架构和**解决方案**。> > 库(lib...
    Rui_bdad阅读 2,984评论 1 4
  • 麦奇阅读 243评论 0 0