clipboard.js

查了不少资料，都是推荐用clipboard.js库进行复制操作。 看了代码，大概明白是怎么回事了。重点是浏览器上的javascript是没有操作剪贴板的API的，你不能下一个命令让剪贴板复制某个字符串。 但是可以用document.execCommand('命令')函数执行网页上的命令，因此我们可以用javascript控制选择一段文本，然后执行网页上的复制命令， 即document.execCommand('copy')达到复制的目的。 来源： oschina 链接： https://my.oschina.net/u/3223803/blog/4329761

注意第一部分的内容不兼容Safari，全兼容的请使用第二部分方法 第一部分 查看demo请点 这里 。 原生js复制指定内容到剪切板，超简单的实现方式， 实现思路如下： 1.创建一个input，把想要复制的内容赋值到input的value上； 2. 把这个input插入到body内； 3.获取这个input，对它执行选中； 4.执行documen的copy事件； 5，删除刚刚插入的input。 代码如下： html: <button id="btn">复制</button> js: // 复制的方法 function copyText(text, callback){ // text: 要复制的内容， callback: 回调 var tag = document.createElement('input' ); tag.setAttribute( 'id', 'cp_hgz_input' ); tag.value = text; document.getElementsByTagName( 'body')[0 ].appendChild(tag); document.getElementById( 'cp_hgz_input' ).select(); document.execCommand( 'copy' ); document.getElementById( 'cp_hgz

修改Markdown代码框 UPD 2020-03-15 五天前这个 主题 的作者更新了1.2.6版本，新版本中改善了对MD代码框的支持，本教程的部分内容已非必要。 初始效果 前几天换了博客的 主题 ，开始用博客园的md编辑器写博客，然而md编辑器的代码高亮支持有些糟糕。 在新主题下<pre>标签与<code>标签背景颜色不统一，代码没有行号，高亮也没有原编辑器的好看。在网上找的的各种解决方案要不就是太丑要不就是因为博客园版本迭代而跑不起来。于是就开始一顿魔改。 修改配色 去 highligh.js官网 找一个配色下载CSS贴进去即可，下面是我用的 .cnblogs-markdown .hljs { display: block; overflow-x: auto; padding: 0.5em; background: #1E1E1E !important; color: #FFF; white-space: pre; word-break: normal; font-family: "Consolas",sans-serif!important; font-size:14px!important; } .hljs { display: block; overflow-x: auto; padding: 0.5em; background: #1E1E1E; color:

@/mixins/Clipboard.js import { Toast } from 'vant' import Clipboard from 'clipboard' export default { directives: { copy: { inserted(el) { const obj = new Clipboard(el) obj.on('success', () => { Toast('复制成功') }) obj.on('error', () => { Toast('复制失败，请手动选择复制') }) } } } } 在需要的页面中引入 import Clipboard from '@/mixins/Clipboard' export default { mixins: [Clipboard], ... } 在模板中使用 <van-icon v-copy data-clipboard-text="内容" class="iconfont" class-prefix="icon" name="copy"/> 来源： oschina 链接： https://my.oschina.net/u/2266306/blog/4335894