clipboard.js复制问题

Zihao88 · 发表于 2020-7-30 16:13

最近在做一个展示不同组合颜色的页面，同时需要对各个组合的颜色做一个复制功能，但加入clipboard.js之后似乎只能复制第一个组合的内容，后面的都复制不了，有没有大佬来给看看

[HTML] 纯文本查看 复制代码

<a id="code" data-clipboard-text="颜色值"> </a>

[JavaScript] 纯文本查看 复制代码

var btn = document.getElementById("code");
if (btn) {
    var href = $("#code").data("clipboard-text");
    var clipboard = new ClipboardJS(btn);
    clipboard.on("success", function(e) {
        const Toast = Swal.mixin({
            toast: true,
            showConfirmButton: false,
            timer: 1300
        });
        Toast.fire({
            type: "success",
            title: "复制成功"
        })
    });
    clipboard.on("error", function(e) {
        const Toast = Swal.mixin({
            toast: true,
            showConfirmButton: false,
        });
        Toast.fire({
            type: "error",
            title: "复制失败"
        })
    })
};

子时落尽 · 发表于 2020-7-30 16:53

[JavaScript] 纯文本查看 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <a class="code" data-clipboard-text="11111"> 11111</a>
    <a class="code" data-clipboard-text="22222"> 22222</a>
    <a class="code" data-clipboard-text="33333"> 33333</a>
    <a class="code" data-clipboard-text="44444"> 44444</a>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.6/clipboard.js"></script>
<script>
    var btnLIst = document.querySelectorAll(".code");
    console.log(btnLIst)
    for (let i = 0; i < btnLIst.length; i++) {
        new ClipboardJS(btnLIst[i]);
    }
</script>

</html>

子时落尽 · 发表于 2020-7-30 16:25

你需要实例化多个ClipboardJS

Zihao88 · 发表于 2020-7-30 16:27

子时落尽发表于 2020-7-30 16:25
你需要实例化多个ClipboardJS

该怎么写呢

还有以后可能要添加很多个颜色组合的

子时落尽 · 发表于 2020-7-30 16:33

Zihao88 发表于 2020-7-30 16:27
该怎么写呢还有以后可能要添加很多个颜色组合的

一种颜色就实例化一个ClipboardJS，这样说懂的吧

Zihao88 · 发表于 2020-7-30 16:35

子时落尽发表于 2020-7-30 16:33
一种颜色就实例化一个ClipboardJS，这样说懂的吧

这样不太好吧添加一种就要实例化一次 js要很大了

子时落尽 · 发表于 2020-7-30 16:36

Zihao88 发表于 2020-7-30 16:35
这样不太好吧添加一种就要实例化一次 js要很大了

这个插件用法是这样

天使无声 · 发表于 2020-7-30 16:44

写个函数，通过参数传递id。然后用此id来实例化一个ClipboardJS就可以了

Zihao88 · 发表于 2020-7-30 16:47

天使无声发表于 2020-7-30 16:44
写个函数，通过参数传递id。然后用此id来实例化一个ClipboardJS就可以了

能否来个例子哈？谢谢！

Zihao88 · 发表于 2020-7-30 16:56

子时落尽发表于 2020-7-30 16:53
[mw_shl_code=javascript,true]

可以啦，谢谢大佬！

帐号		自动登录	找回密码
密码			注册[Register]

[求助] clipboard.js复制问题

免费评分