由于幽游地博客以后可能会推荐一些VPS 优惠信息,当展示优惠码时,希望能够实现用户点击该优惠码即自动复制,所以整合了一下网络资源,实现点击文本后,自动复制该文本到剪贴板,简化了用户的操作。(其实就是为了装比

uud.me-clipboard-1

引入js

实现此功能,需要用到开源项目clipboard.js

你可以下载clipboard.js 的源码,放到自己服务器上,然后引入使用。即以下的方式一

也可以使用公共CDN 库里的clipboard.js ,直接引用。即以下的方式二

两种方式各有利弊。

方式一比较稳定,但比较麻烦,如果自己的服务器网络不好,可能也会对速度有些许影响

方式二比较简单快捷,但万一哪天CDN 库炸了,就无法使用

我比较推荐使用方式二

方式一:使用源码

打开clipboard.js 项目地址:

下载源码:

uud.me-clipboard-2

下载后,解压clipboard.js-2.0.4.zip文件夹,将其中的dist文件夹上传到Typecho 主题的/assets/js文件夹中

uud.me-clipboard-3

推荐把dist改为clipboard.js,以便区分

使用CDN

uud.me-clipboard-4

使用CDN 则无需下载源码,直接在主题目录下的 header.php 中插入以下代码:

<script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.js"></script>

如果你使用的是方式一源码,则在主题目录下的 header.php 中插入以下代码:

<script src="/usr/themes/handsome/assets/js/clipboard.js/clipboard.min.js"></script>

不同的主题,具体路径有所不同,需要你将上面代码中的handsome 换为你的主题名称

主题设置 - 开发者设置 - 自定义JavaScript 中插入代码:

var btn = document.getElementById('btn');
var clipboard = new ClipboardJS(btn);
clipboard.on('success', function(e) {
    console.log(e);
});
clipboard.on('error', function(e) {
    console.log(e);
});

一般主题都会有这个设置,如果没有,你也可以手动到主题目录下的footer.php加入以下代码:

<script type="text/javascript">
var btn = document.getElementById('btn');
var clipboard = new ClipboardJS(btn);
clipboard.on('success', function(e) {
    console.log(e);
});
clipboard.on('error', function(e) {
    console.log(e);
});
</script>

如何使用

在使用中,将标签id设置为btndata-clipboard-text的值填写你要复制的字符串,例如:

<span id="btn" data-clipboard-text="https://www.uud.me">点击此处复制链接</span>

实现的效果:

Last modification:January 27th, 2019 at 11:22 pm
如果觉得我的文章对你有用,请随意赞赏