clipboard vue3中的使用案例

便捷教程网

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>clipboardjs 例子</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/vue3/vue3.5.11.min.js"></script>
    <script src="https://php.bian-jie.cn/interface/staticDownload/clipboard/clipboard.min.js"></script>
</head>
<body>
    <div id="app" class="itxst">
        <div>
            <input v-model="state.message" />
            <input class="btn" @click="copy" type="button" v-model="state.tips"  />
        </div>
    </div>
    <script>
        const app = {
            data() {
                return {
                    state: { 
                        message: "https://www.itxst.com",
                        tips:'复制'
                 }
                }
            },
            methods: {
                //复制方法，本例子是vue3环境下，同样在vue2中也可以使用
                copy() {
                    let clipboard = new ClipboardJS(".btn", {
                        text: () => {
                            //返回需要复制的字符串
                            return this.state.message;
                        },
                    });
                    clipboard.on("success", () => {
                        clipboard.destroy();
                        this.state.tips='复制成功';
                    });
                    clipboard.on("error", () => {
                        clipboard.destroy();
                    });
                }
            }
        }
        Vue.createApp(app).mount('#app')
    </script>
    <style>
    </style>
</body>
</html>

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