zoukankan      html  css  js  c++  java
  • clipboard vue 一键复制

    一键复制失败 

    首先 下载clipboard插件

    npm install clipboard --save 

    在需要的组件里引入 也可以全局引入

    import Clipboard from 'clipboard'

    在页面中使用

    <p class="clipboardObj"   <-- 作为选择器的标识,也可以使用id -->
     :data-clipboard-text="inviteCode"   <-- inviteCode要复制的内容 -->
     @click="copy">一键复制</p>
    在方法里写
    copy () {
        var clipboard = new Clipboard('.clipboardObj'// 这里可以理解为选择器,选择上面的复制按钮
        clipboard.on('success', e => {
            console.log('复制成功')
            // 释放内存
            clipboard.destroy()
        })
        clipboard.on('error', e => {
            // 不支持复制
            console.log('复制失败')
            // 释放内存
            clipboard.destroy()
        })
    }
    也有可能遇到复制没有反应 我遇到有两种情况,第一种需要复制的内容为空 第二中 选择器没有找到要复制的内容
    可以采取另一种方式
    <p @click="copy($event,inviteCode)">一键复制</p>  //inviteCode要复制的值 
    copy(e, text) {
        const clipboard = new Clipboard(e.target, { text: () => text })
        clipboard.on('success', e => {
            console.log('复制成功')
            // 释放内存
            clipboard.off('error')
            clipboard.off('success')
            clipboard.destroy()
        })
        clipboard.on('error', e => {
            // 不支持复制
            console.log('复制失败')
            // 释放内存
            clipboard.off('error')
            clipboard.off('success')
            clipboard.destroy()
        })
        clipboard.onClick(e)
    }
     
  • 相关阅读:
    1864: [Zjoi2006]三色二叉树
    3611: [Heoi2014]大工程
    2286: [Sdoi2011]消耗战
    2298: [HAOI2011]problem a
    2037: [Sdoi2008]Sue的小球
    P4512 【模板】多项式除法
    P4238 【模板】多项式求逆
    3771: Triple
    P3365 改造二叉树
    1191: [HNOI2006]超级英雄Hero
  • 原文地址:https://www.cnblogs.com/jackie-song/p/13913838.html
Copyright © 2011-2022 走看看