告别 Flash 和臃肿框架！这个 3 万 Star 的开源工具帮你提高效率

正文

请到「今天看啥」查看全文

<textarea id="bar">Mussum ipsum cacilds...textarea>


<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
    Cut to clipboard
button>

注意： cut 仅在 或 </code> 元素中生效。</p></blockquote><h3 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;font-size: 20px;"><span style="display: none;"></span><span style="font-size: 18px;color: #3da742;">从属性中拷贝内容</span><span style="display: none;"></span></h3><p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">如果不需要从其他元素中拷贝内容，那么可以在触发元素上添加 <code style="font-size: 14px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;overflow-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;color: rgb(233, 105, 0);background: rgb(248, 248, 248);">data-clipboard-text</code> 属性，属性值为需要拷贝的内容。</p><pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><span style="display: block;background: url("https://mmbiz.qpic.cn/mmbiz_png/DSU8cv1j3ibQHqc6BxFZHCWqRrSNJA3pJ0icf8CeLicjbqhEtsFdRkHq8TSRka2b0yic4x3ekYAbHiaJ1Zt3ywB4fSg/640?wx_fmt=png") 10px 10px / 40px no-repeat rgb(40, 44, 52);height: 30px;width: 100%;margin-bottom: -7px;border-radius: 5px;"></span><code style="overflow-x: auto;padding: 16px;color: #abb2bf;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;font-size: 12px;-webkit-overflow-scrolling: touch;padding-top: 15px;background: #282c34;border-radius: 5px;"><span style="color: #5c6370;font-style: italic;line-height: 26px;"><!-- Trigger --></span><br /><span style="line-height: 26px;"><<span style="color: #e06c75;line-height: 26px;">button</span> <span style="color: #d19a66;line-height: 26px;">class</span>=<span style="color: #98c379;line-height: 26px;">"btn"</span> <span style="color: #d19a66;line-height: 26px;">data-clipboard-text</span>=<span style="color: #98c379;line-height: 26px;">"Just because you can doesn't mean you should — clipboard.js"</span>></span><br />    Copy to clipboard<br /><span style="line-height: 26px;"></<span style="color: #e06c75;line-height: 26px;">button</span>></span><br /></code></pre><h3 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;font-size: 20px;"><span style="display: none;"></span><span style="font-size: 18px;color: #3da742;">事件处理</span><span style="display: none;"></span></h3><p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">如果在拷贝完后需要执行其他自定义操作，可以添加 <code style="font-size: 14px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;overflow-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;color: rgb(233, 105, 0);background: rgb(248, 248, 248);">success</code> 或 <code style="font-size: 14px;font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;overflow-wrap: break-word;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;color: rgb(233, 105, 0);background: rgb(248, 248, 248);">error</code> 事件。</p><pre data-tool="mdnice编辑器" style="margin-top: 10px;margin-bottom: 10px;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.55) 0px 2px 10px;"><span style="display: block;background: url("https://mmbiz.qpic.cn/mmbiz_png/DSU8cv1j3ibQHqc6BxFZHCWqRrSNJA3pJ0icf8CeLicjbqhEtsFdRkHq8TSRka2b0yic4x3ekYAbHiaJ1Zt3ywB4fSg/640?wx_fmt=png") 10px 10px / 40px no-repeat rgb(40, 44, 52);height: 30px;width: 100%;margin-bottom: -7px;border-radius: 5px;"></span><code style="overflow-x: auto;padding: 16px;color: #abb2bf;display: -webkit-box;font-family: Operator Mono, Consolas, Monaco, Menlo, monospace;font-size: 12px;-webkit-overflow-scrolling: touch;padding-top: 15px;background: #282c34;border-radius: 5px;"><span style="color: #c678dd;line-height: 26px;">var</span> clipboard = <span style="color: #c678dd;line-height: 26px;">new</span> ClipboardJS(<span style="color: #98c379;line-height: 26px;">'.btn'</span>);<br /><br />clipboard.on(<span style="color: #98c379;line-height: 26px;">'success'</span>, <span style="line-height: 26px;"><span style="color: #c678dd;line-height: 26px;">function</span>(<span style="line-height: 26px;">e</span>) </span>{<br />    <span style="color: #e6c07b;line-height: 26px;">console</span>.info(<span style="color: #98c379;line-height: 26px;">'Action:'</span>, e.action);<br />    <span style="color: #e6c07b;line-height: 26px;">console</span>.info(<span style="color: #98c379;line-height: 26px;">'Text:'</span>, e.text);<br />    <span style="color: #e6c07b;line-height: 26px;">console</span>.info(<span style="color: #98c379;line-height: 26px;">'Trigger:'</span>, e.trigger);<br /><br />    e.clearSelection();<br />});<br /><br />clipboard.on(<span style="color: #98c379;line-height: 26px;">'error'</span>, <span style="line-height: 26px;"><span style="color: #c678dd;line-height: 26px;">function</span>(<span style="line-height: 26px;">e</span>) </span>{<br />    <span style="color: #e6c07b;line-height: 26px;">console</span>.error(<span style="color: #98c379;line-height: 26px;">'Action:'</span>, e.action);<br />    <span style="color: #e6c07b;line-height: 26px;">console</span>.error(<span style="color: #98c379;line-height: 26px;">'Trigger:'</span>, e.trigger);<br />});<br /></code></pre><p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">实例展示：进入 官网，打开 console 即可。</p><h3 data-tool="mdnice编辑器" style="margin-top: 30px;margin-bottom: 15px;font-weight: bold;font-size: 20px;"><span style="display: none;"></span><span style="font-size: 18px;color: #3da742;">Tooltips</span><span style="display: none;"></span></h3><p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">由于每个应用都有不同的设计，因此 clipboard.js 不提供任何内置 css 的 tooltip 解决方案。</p><p data-tool="mdnice编辑器" style="padding-top: 8px;padding-bottom: 8px;line-height: 26px;">如果需要实现 tooltip 效果，可以参考官网实现类似效果，网站中使用的是 GitHub's Primer 样式。

请到「今天看啥」查看全文