vue点击实现复制

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

首先先安装模块工具

cnpm install clipboard --save

在当前页面引入模块

import Clipboard from 'clipboard';

使用：
html代码

<div class="box">我的邀请码：<span class="inviteCode" >XF684V1G</span><span class="copy order-id" :data-clipboard-text="'XF684V1G'" @click="copy">复制</span></div>

页面样式


点击复制之后的js

copy () {
      var clipboard = new Clipboard('.order-id') //绑定数据标签的类名
      clipboard.on('success', e => {
        Toast('邀请码已复制');
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        console.log('该浏览器或手机权限不支持复制功能');
        // 释放内存
        clipboard.destroy()
      })
    },

注意：order-id类名 和 :data-clipboard-text 建议绑定在复制按钮上

如果以上方法复制无效，请看下面最后再提供一种

async copy(val){
      let target = document.createElement('input') //创建input节点
      target.value = val // 给input的value赋值
      document.body.appendChild(target) // 向页面插入input节点
      target.select() // 选中input
      try {
        await document.execCommand('Copy') // 执行浏览器复制命令
        this.$message({
          message: '复制成功',
          type: 'success'
        });
      } catch {
        this.$message({
          message: '您的浏览器不支持复制',
          type: 'error'
        });
      }
    },

 再来一种方法

<div
  v-clipboard:copy="input1"  //被复制的内容
  v-clipboard:success="onCopy" //复制成功回调
  v-clipboard:error="onError" //失败之后回调
  class="COFY"
 >
  COFY
</div>

以上是 vue点击实现复制 的全部内容， 来源链接： utcz.com/z/377358.html

回到顶部