zoukankan      html  css  js  c++  java
  • js实现复制|剪切指定内容到粘贴板--clipboard

    这是著名开源项目 clipboard.js 的 README.md,里面讲解的更加详细,有兴趣的同学可以了解一下。
    项目地址:https://github.com/zenorocha/clipboard.js

    下面我就简单记录一下,我对clipboard.js的小小见解。

    安装:

    npm install clipboard --save

    安装完成后,会在项目目录下的node_modules文件夹下找到clipboard文件夹

    注:如果不是vue项目,可以去官网https://clipboardjs.com/下载js,通过<script src='clipboard.js'></script>使用

     

    使用:

    在需要使用的地方引入import Clipboard from 'clipboard'

    html部分:

    注:给按钮添加两个属性--data-clipboard-target和data-clipboard-action

      data-clipboard-target属性的值就是能匹配到另一个元素的选择器;data-clipboard-action属性来指明你想要复制(copy)还是剪切(cut)内容,默认copy;

      还需要注意的是如果设置cut动作只在 <input> 或 <textarea> 元素起作用。

      如果你不需要从另一个元素来复制内容。你仅需要给目标元素设置一个 data-clipboard-text 属性就可以了; data-clipboard-text 属性值为你设置的固定内容

    js部分:

    最后,如果你使用单页应用,你可能想要更加精确地管理 DOM 的生命周期。你可以清理事件以及创建的对象。

    clipboard.destroy();

  • 相关阅读:
    display:block 的认识
    document.dcoumentElement.scrollTop
    display:block的注意
    JavaScript中的Timer是怎么工作的
    创建函数还有一种方法
    $.fn.extend()与$.extend()的使用
    jq遍历的基础语法之二
    损失函数
    Python之函数装饰器
    激活函数
  • 原文地址:https://www.cnblogs.com/candy-xia/p/11377360.html
Copyright © 2011-2022 走看看