Clipboard复制插件

2022-07-17 09:54:16
2024-03-27 22:59:23

引用方法

原生

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

vue

npm i -S clipboard 
import ClipboardJS from "clipboard";

使用方法

  • 给目标元素添加一个 data-clipboard-target 属性
  • data-clipboard-action="cut" 剪切内容,但是 cut 操作只在<input> 或者 <textarea> 元素上生效
<div id = "foo"> 我被data - clipboard - target复制了 </div>
<a
  class="btn"
  href="javascript:"
  data-clipboard-target="#foo"
  rel="noopener noreferrer"
>
  从"foo"复制文本
</a>

通过属性复制文本

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

<button class = "btn" data-clipboard-text = "我复制这个属性"></button>
   //初始化 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,则需要返回一个节点,即 动态设置点击复制的目标元素
new ClipboardJS('.btn', {
    target: function(trigger) {
        return trigger.nextElementSibling  ||  document.getElementById('name');
    }
});
  • 如果想动态设置内容文本text,则返回一个字符串String
new ClipboardJS('.btn', {
    text: function(trigger) {
        return trigger.getAttribute('aria-label') || 'default text ';
    }
});
  • vue的用法
  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 就行了
目录
暂无评论,欢迎留下你的评论

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

昵称
留言
赞赏金额