使用clipboard.js实现移动端页面一键复制功能 + 弹出复制成功提示

最近再写一个简单的html官网移动端页面，需求是一键复制邀请码，再百度上找了好多例子 各种尝试 然后找到一种可以解决的办法

html部分

<input type="text" id="copyVal" readonly value="复制我" />

<button class="copyBtn" data-clipboard-target="#copyVal">点击复制</button>

尝试了好多 就这个好用 button

引入clipboard.min.js 可以使用BootCDN 也可以下载clipboard.min.js

js部分

var copyBtn = new ClipboardJS('.copyBtn');

copyBtn.on("success",function(e){
    // 复制成功
    // alert(e.text);
    showMessage('已成功复制邀请码','success',2000)
    e.clearSelection();
});
copyBtn.on("error",function(e){
    //复制失败；
    showMessage('复制邀请码失败','error',2000)
    console.log( e.action )
});

alert提示太丑了 换了这种的

function showMessage(message,type,time) {
        let str = ''
        switch (type) {
            case 'success':
                str = '<div class="success-message" style="width: 100%;height: 50px;background-color: #030026;font-size:17px;text-align: center;color:#fff;position: fixed;left: 0%;bottom: 0%;line-height: 50px;z-index: 9999">\n' +
                    '    <span class="mes-text">'+message+'</span></div>'
                break;
            case 'error':
                str = '<div class="error-message" style="width: 100%;height: 50px;background-color: #030026;font-size:17px;text-align: center;color: #fff;position: fixed;left: 0%;bottom: 0%;line-height: 50px;z-index: 9999">\n' +
                    '    <span class="mes-text">'+message+'</span></div>'
        }
        $('body').append(str)
        setTimeout(function () {
            $('.'+type+'-message').remove()
        },time)
    }