微信號複製跟跳轉——clipboard.js

clipboard.js是現代化的「複製到剪切板」插件。

安裝：

1.經過npm 安裝：npm install clipboard --save

2.官網下載：https://clipboardjs.com/

兼容性：

 

案例：

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';
        }

至此該案例已成功實現