clipboard插件的使用

Posted 2021-10-05 //我是小白

clipboard是一款实现复制文本到剪贴板功能的JS插件

复制的方式
–从target复印目标内容
–通过function要复印的内容
–通过属性返回复印的内容

2、从target复印目标内容

<input id="foo" type="text" value="hello">
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo">Copy</button>

3、通过function 要复印的内容

    <button class="btn">Copy_target</button>
    <div>hello</div>

    <script>
    var clipboard = new Clipboard('.btn', {
    // 通过target指定要复印的节点
        target: function() {
                   return document.querySelector('div');
              }
    });

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>

3、通过属性返回复印的内容

// 通过id获取复制data-clipboard-text的内容 
<div id="btn" data-clipboard-text="1">
        <span>Copy</span>
</div>

<script>
    var btn = document.getElementById('btn');
    var clipboard = new Clipboard(btn);

    clipboard.on('success', function(e) {
        console.log(e);
    });

    clipboard.on('error', function(e) {
        console.log(e);
    });
    </script>