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'; }
至此该案例已成功实现