zoukankan      html  css  js  c++  java
  • vue 复制内容到粘贴板

      首先是npm安装依赖包:npm install clipboard --save

      导入组件:import Clipboard from "clipboard";

      html如图:

      

      class="copy",用于下面的JS中获取当前复制按钮这个对象,data-clipboard-text是表示复制当前的属性,属性值我这里用的变量Code,大家注意一下,data-clipboard-text前面带上 " :"号,否则Code会被视作字符串处理,而非自定义的变量。@click绑定了一个自定义的copy事件,下面我们看一下:

      

      copy事件里,通过on给复制按钮绑定了两个事件,success和error,分别是复制成功和失败,考虑到潜在的兼容性问题,最好留下error提示,比较友好。

      以上就是vue项目里复制粘贴的教程,如果帮助到了你,请点个赞哟。

       附上Github详细教程:https://github.com/zenorocha/clipboard.js


       

      2019年5月9日17:18:45 BUG修复:

      

      message下面改成如图所示,才是正确的清理方式, 否则重复点击会一直弹message窗,原因是粘贴板对象未被释放。

  • 相关阅读:
    docker pull 报错解决办法
    cobbler自动装机!
    centos7 日志定期清理
    【转载】python 模块
    0603 python 基础02
    0527 python 基础01
    0520 python
    160519 如何做自动化测试?
    SourceTree&Git部分名词解释
    sourceTree安装与使用
  • 原文地址:https://www.cnblogs.com/sunshine-wy/p/10830331.html
Copyright © 2011-2022 走看看