clipboard 在vue2 中使用 clipboard.js 复制功能

便捷教程网

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>ClipboardJS vue umd版本</title>
        <meta name="viewport"
            content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
        <script src="https://php.bian-jie.cn/interface/staticDownload/vue2/vue2.6.8.min.js"></script>
        <script src="https://php.bian-jie.cn/interface/staticDownload/clipboard/clipboard.min.js"></script>
        <style scoped>
            #btn {
                display: inline-block;
                padding: 3px 12px;
                border-radius: 6px;
                background-color: #eee;
                color: #333;
                cursor: pointer;
            }

#btn:active {
                background-color: #ddd;
                color: #666;
            }
        </style>
    </head>

<body style="padding:10px;">
        <div id="app">
            <div id="btn" @click="copy">复制</div>
        </div>
        <script>
            var app = new Vue({
            el: '#app',  
            data() {
                return {
                   msg: "https://www.bian-jie.cn",    
                };
            },
            methods: {
                 //复制方法
                copy: function () {
                var that = this;
                //注意vue umd版本ClipboardJS，而ES包请使用Clipboard
                var clipboard = new ClipboardJS("#btn",{
                    text: function (trigger) {
                    //返回字符串
                    return that.msg;
                    }});
                clipboard.on("success", (e) => {
                    //复制成功
                    clipboard.destroy();
                });
                clipboard.on("error", (e) => {
                    //复制失败
                    clipboard.destroy();
                });
                },
            }
        });
        </script>
    </body>

</html>

运行结果如下：结果如下：尺寸：