微信号复制跟跳转——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\';
        }

至此该案例已成功实现