【vue】实现点击复制功能

最新推荐文章于 2025-07-02 14:30:46 发布

Summer⊙

最新推荐文章于 2025-07-02 14:30:46 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue学习笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44862029/article/details/128117424

Vue学习笔记专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何在Vue.js项目中实现点击按钮快速复制文本的功能，通过使用clipboard API或者第三方库如vue-clipboard2，详细讲解了配置和使用步骤，帮助开发者提升前端交互体验。

<div @click.stop="copyVal(txt_val)">{{txt_val}}</div>

methods: {
        // 复制操作
        copyVal(context) {
            // 创建输入框元素
            let oInput = document.createElement('input');
            // 将想要复制的值
            oInput.value = context;
            // 页面底部追加输入框
            document.body.appendChild(oInput);
            // 选中输入框
            oInput.select();
            // 执行浏览器复制命令
            document.execCommand('Copy');
            // 弹出复制成功信息
            this.$message.success('复制成功');
            // 复制后移除输入框
            oInput.remove();
        }
    }