复制 clipboard.min.js 库的使用

官网：https://clipboardjs.com/
官方js:https://clipboardjs.com/dist/clipboard.min.js

使用步骤

1.引入clipboard.min.js

2.定义页面元素

• 复制输入框的内容

//input定义id和value属性
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
//button定义class，设置data-clipboard-target属性来定位输入框
<button class="btn" data-clipboard-target="#foo">
        <img class="clippy" src="https://clipboardjs.com/assets/images/clippy.svg" alt="Copy to clipboard">
</button>

//如果设置data-clipboard-action="cut"则会剪切输入框内的内容
<button class="btn" data-clipboard-target="#foo" data-clipboard-action="cut">
        剪切
</button>

• 按钮上直接定义复制内容

//button定义class，设置data-clipboard-text属性为要复制的内容来源
<button class="btn" data-clipboard-text="镜花水月">
        复制
</button>

3.实例初始化

//.btn为触发事件的对应元素
var clipboard = new ClipboardJS('.btn');
    
    clipboard.on('success', function(e) {
        console.info('Action:', e.action);
        console.info('Text:', e.text);
        console.info('Trigger:', e.trigger);
        alert('复制成功')
        e.clearSelection();
    });
    
    clipboard.on('error', function(e) {
        console.error('Action:', e.action);
        console.error('Trigger:', e.trigger);
    });

以上是复制固定内容的方法，如果动态复制内容，可使用以下写法

//#btn为触发事件的对应元素，text函数处理要返回的文本
let clipboard2 = new ClipboardJS('#btn', {
        text: function () {
            //此处为处理函数并返回text
            return '没有人能够阻挡~自由的向往';
        }
    });
    clipboard2.on('success', function(e) {
        alert('复制成功')
    })

最后销毁实例 clipboard.destroy();