修改一主题遇到的问题,需要为文章代码添加复制功能。点击复制有 clipboard.js 这个插件可用,但它不支持复制结果提示,使用体验不太好。看到 Bootstrap 文档里的效果不错,于是提取出来给大家参考。
复制提示用到 Bootstrap Tooltip 组件,除了引入 jQuery 和 Bootstrap 外,还需要 Popper.js (UMD 版本)。如果你用的 Bootstrap 3,则不依赖 Popper.js。但需要将 JavaScript 代码里的 _fixTitle
改为 fixTitle
。
引入资源
<link rel="stylesheet" href="https://cdnjs.loli.net/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" /> <script src="https://cdnjs.loli.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdnjs.loli.net/ajax/libs/popper.js/1.9.9/umd/popper.min.js"></script> <script src="https://cdnjs.loli.net/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script> <script src="https://cdnjs.loli.net/ajax/libs/clipboard.js/2.0.6/clipboard.min.js"></script>
HTML
<div class="demo"><pre><a href="https://www.example.com/">超链接</a></pre></div> <figure class="demo"><pre><img src="https://www.example.com/favicon.png" alt="图片描述文本"></pre></figure>
JavaScript
$("figure.demo, div.demo").each(function() { $(this).before('<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="复制到剪贴板">复制</button></div>'), $(".btn-clipboard").tooltip().on("mouseleave", function() { $(this).tooltip("hide") }) }); var clipboard = new ClipboardJS(".btn-clipboard", { target: function(e) { return e.parentNode.nextElementSibling } }); clipboard.on("success", function(e) { $(e.trigger).attr("title", "已复制").tooltip("_fixTitle").tooltip("show").attr("title", "复制到剪贴板").tooltip("_fixTitle"), e.clearSelection() }), clipboard.on("error", function(e) { $(e.trigger).attr("title", "未复制").tooltip("_fixTitle").tooltip("show").attr("title", "复制到剪贴板").tooltip("_fixTitle") })
代码修改来源 https://getbootstrap.com/docs/4.4/assets/js/docs.min.js