• ClipboardJS——开发学习总结1


    问题需求描述:

    由于是公司内部app,无法在app内复制、甚至截图,涉及安全隐私。

    app内嵌H5页面,通过使用复制按钮,实现文本复制!

    解决方法:

    ClipboardJS,一款将文本复制到剪贴板的js插件,不使用flash,最小仅3k

    1.使用方式:

    npm安装:npm i clipboard --save

    CDN安装:<script src="dist/clipboard.min.js"></script>

    2.创建clipboard.js实例,通过传递 DOM 选择器、HTML 元素或 HTML 元素列表创建

    <div id="temp_text">我是需要被复制的文字</div>

    <button class="copy_btn" data-clipboard-target="#temp_text">一键复制</button>

    var clipboard = new Clipboard('.copy_btn');

    clipboard.on('success', function(e) {

            console.info('Action:', e.action);

            console.info('Text:', e.text);

            console.info('Trigger:', e.trigger);

            e.clearSelection();

    });

    clipboard.on('error', function(e) {

            console.error('Action:', e.action);

            console.error('Trigger:', e.trigger);

    });

    3. 其他属性说明

     data-clipboard-target:触发器元素的 data-clipboard-target 属性中包含的值需要与另一个元素的选择器相匹配

    <div id="temp_text">我是需要被复制的文字</div>

    <button class="copy_btn" data-clipboard-target="#temp_text">一键复制</button>

    data-clipboard-text:不一定非要从另一个元素复制其内容。 也可以只在触发器元素中包含一个 data-clipboard-text 属性并复制该属性的内容

    <button class="copy_btn" data-clipboard-text="我是被复制的文字">我复制我自己属性里的文字</button>

    data-clipboard-action:指定是要复制还是剪切内容,值为 cut 表示执行剪切操作。如果省略此属性,默认情况下将使用复制

    <div id="temp_text">我是需要被复制的文字</div>

    <button class="copy_btn" data-clipboard-target="#temp_text" data-clipboard-action="cut">一键剪切</button>

  • 相关阅读:
    LVS四层负载均衡架构详解
    (三)SvelteKit教程:layout 文件
    Django的PATH路径转换器
    面向对象设计——原型模式
    k8s 基础理论
    HTML简单介绍
    文件上传下载
    常用git命令
    Fragment中使用ViewPager滑动浏览页面
    Upload-labs(1-21关详细教程)【简单易懂】【万字教程】
  • 原文地址:https://blog.csdn.net/Mr_LiuP/article/details/125498720