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

至此该案例已成功实现