clipboard.js是現代化的“複製到剪下板”外掛。

安裝：

通過npm 安裝：npminstall clipboard--save

相容性：

案例：

HTML：

 <button onClick='_toolTipOpen()'>開啟彈窗</button>
    <!-- 彈窗內容 -->
    <div id='_toolTipBox' onClick='_toolTipClose()'></div>
    <div id='_toolTip'>
        <div class='_tipText'>加[李四]微信好友</div>
        <div class='_tipCode '><span id="wechatCode">wechat</span></div>
        <div class='_tipCopy ' data-clipboard-action='copy' data-clipboard-target='#wechatCode'>點選複製</div>
        <a class='_tipOpenAPP' href='weixin://'>開啟微信<span>（如無反應，請手動開啟）</span></a>
        <div class='_toolTipClose' style='bottom: 10px;' onClick='_toolTipClose()'>取消</div>
    </div>

css:

        #_toolTipBox {
            display: none;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.4);
            position: fixed;
            top: 0;
            left: 0;
            z-index: 90;
            transition: all 0.8s;
        }

        #_toolTip {
            display: none;
            position: fixed;
            transition: all 0.5s;
            line-height: 60px;
            z-index: 99;
            width: 90%;
            text-align: center;
            margin: auto;
            left: 0;
            right: 0;
            bottom: 10px;
            font-family: 微軟雅黑;
            border-radius: 15px;
            color: #4d9dfe;
            font-size: 16px;
        }

        #_toolTip ._tipText {
            background: #FFF;
            width: 100%;
            height: 60px;
            line-height: 60px;
            border-bottom: 1px solid #D1D1D3;
            color: #4d9dfe;
            border-radius: 18px 18px 0 0;
        }

        #_toolTip ._tipCode {
            background: #FFF;
            border-bottom: 1px solid #D1D1D3;
        }

        #_toolTip ._tipCopy {
            background: #FFF;
            border-bottom: 1px solid #D1D1D3;
            cursor: pointer;
        }

        #_toolTip ._tipOpenAPP {
            background: #FFF;
            display: block;
            border-radius: 0 0 18px 18px;
            text-decoration: none;
            color: #4d9dfe;
        }

        #_toolTip ._tipOpenAPP span {
            font-size: 14px;
            color: #888;
        }

        #_toolTip ._toolTipClose {
            background: #FFF;
            border-radius: 18px;
            margin-top: 18px;
            cursor: pointer;
        }
    </style>

js部分

首先引入clipboard.js外掛

 <script src="clipboard.min.js"></script>

然後是微訊號複製功能：

 // 微訊號複製
        var clipboard = new ClipboardJS('._tipCopy');
        clipboard.on('success', function (e) {
            console.log(e);
            alert('微訊號複製成功！');
        });
        clipboard.on('error', function (e) {
            console.log(e);
            alert('微訊號複製失敗，請手動複製！');
        });
        function stopPropagation(e) {
            e = e || window.event;
            if (e.stopPropagation) {
                /*W3C阻止冒泡方法 */
                e.stopPropagation();
            } else {
                /*IE阻止冒泡方法*/
                e.cancelBubble = true;
            }
        }

彈窗的開啟和關閉功能

 /*開啟彈窗*/
        function _toolTipOpen() {

            document.getElementById('_toolTipBox').style.display = 'block';
            document.getElementById('_toolTip').style.display = 'block';
        };
        /*關閉彈窗*/
        function _toolTipClose() {

            document.getElementById('_toolTipBox').style.display = 'none';
            document.getElementById('_toolTip').style.display = 'none';
        }

至此該案例已成功實現