【angular】实现一键复制的几种方法

借助输入框实现复制

注意事项：移动端（ios）复制时，此方法会唤起键盘

写法一： html内写一个隐藏的input

    <!-- input框不能隐藏 可通过样式挪到屏幕外 -->
    <input type="text" name="copyInput" id="copyInput" ng-model="copyvalue"
           style="position: absolute;left:-100px;bottom:-100px">

    <button ng-click="doCopy(copyvalue);">一键复制</button>

/**
 * 复制
 */
doCopy(value) {
    const input = document.querySelector('.copyInput');

    input.value = value;

    // 选中赋值过的input
    input.select();

    document.execCommand('Copy');
    alert('复制成功');
}

写法二：用js创建input

实测：android机功能正常；ios首次点击正常，再次点击依然会唤起键盘

/**
 * 复制
 */
doCopy(value) {
    const oInput = document.createElement('input');

    oInput.value = value;
    document.body.appendChild(oInput);
    oInput.select();
    document.execCommand('Copy');

    // removeChild ios无法复制
    // oInput.parentNode.removeChild(oInput);
    oInput.style.display = 'none';
    console.log('复制成功');
}

原文链接：js实现一键复制 https://www.cnblogs.com/qiufang/p/8987084.html

插件clipboard.js实现复制功能

引入插件包 https://github.com/zenorocha/clipboard.js/

// 下载插件
npm install clipboard --save

// 引入clipboard/dist/clipboard.min.js
window.ClipboardJS = require('clipboard/dist/clipboard.min');

<div class="btn-copy"
     data-clipboard-text={{value}}
     ng-click="$ctrl.doCopy()">
    复制
</div>

/**
 * 复制
 */
doCopy() {
    const clipboard = new ClipboardJS('.btn-copy');

    clipboard.on('success', (e) => {
        alert('复制成功');

        e.clearSelection();
    });

    clipboard.on('error', (e) => {
        alert('请手动选择文本复制');
        console.log('Trigger:', e.trigger);
    });
}

官网更多用法： https://github.com/zenorocha/clipboard.js/