小白龙博客 | 小白龙博客

Clipboard复制插件

2022-07-17 17:54:16

2025-01-03 01:50:15

引用方法

原生

js 复制代码

<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>

vue

shell 复制代码

npm i -S clipboard

shell 复制代码

import ClipboardJS from "clipboard";

使用方法

给目标元素添加一个 data-clipboard-target 属性
data-clipboard-action="cut" 剪切内容，但是 cut 操作只在<input> 或者 <textarea> 元素上生效

html 复制代码

<div id = "foo"> 我被data - clipboard - target复制了 </div>
<a
  class="btn"
  href="javascript:"
  data-clipboard-target="#foo"
  rel="noopener noreferrer"
>
  从"foo"复制文本
</a>

通过属性复制文本

仅需要给目标元素设置一个 data-clipboard-text 属性即可,从属性复制文本

html 复制代码

<button class = "btn" data-clipboard-text = "我复制这个属性"></button>

js 复制代码

   //初始化 clipboard 对象
    var clipboard = new ClipboardJS('.btn');

    //成功
    clipboard.on('success', (e) => {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
        //清除文本选中状态
        e.clearSelection();
    });

    //失败
    clipboard.on('error', (e) => {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });

高级用法

例如如果想动态的设置一个目标元素target，则需要返回一个节点,即动态设置点击复制的目标元素

js 复制代码

new ClipboardJS('.btn', {
    target: function(trigger) {
        return trigger.nextElementSibling  ||  document.getElementById('name');
    }
});

如果想动态设置内容文本text，则返回一个字符串String

js 复制代码

new ClipboardJS('.btn', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label') || 'default text ';
    }
});

vue的用法

js 复制代码

  data() {
   //复制实例
   clipboard: ""
  },
  mounted() {
        //初始化 clipboard 对象
        this.clipboard = new ClipboardJS(".btn");
  },
  methods: {
        copyurl() {
            //成功
            this.clipboard.on("success", e => {
                this.$message({
                    message: "链接复制成功",
                    type: "success"
                });

                //清除文本选中状态
                e.clearSelection();
                this.clipboard.destroy();
                this.clipboard = new ClipboardJS(".btn");
            });

            //失败
            this.clipboard.on("error", e => {
                this.$message.error("链接复制失败");
            });
        },
  },
 destroyed() {
        // 销毁Clipboard实例，避免在其它页面或组件中实例化Clipboard后造成再次监听，产生重复回调
        this.clipboard.destroy();
 }

常见问题

css3要是设置了user-select:none,复制和剪贴都不会生效

可以清除这个样式
直接用变量赋值

ios默认非点击标签没有点击效果

把div 换成 button 就行了

运营需要亿点资金维持，您的支持，是小白龙创作的动力！！！

暂无评论，欢迎留下你的评论