Vue + elementui 实现文本内容复制（简易版）

最新推荐文章于 2025-10-15 14:46:51 发布

原创最新推荐文章于 2025-10-15 14:46:51 发布 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #javascript #html #css

Vue 专栏收录该内容

13 篇文章

订阅专栏

该博客详细介绍了如何使用Vue和ElementUI组件库，通过HTML与JavaScript代码实现简单的文本内容复制功能。用户只需点击按钮，即可轻松复制页面上的文本。

1.需求

点击实现复制文本内容

2.实现效果

在这里插入图片描述
HTML代码：

<template>
    <div>
        <div style="background-color: #f4f4f4;margin:50px 0 0 460px;width:500px;height:300px;">
            <el-input v-model="content"></el-input>
            <p>{{ copytext }}</p>
            <el-button type="text" @click="copyText(copytext)">复制</el-button>
        </div>
    </div>
</template>

JavaScript代码：

<script>
export default {
    data () {
        return {
            content: '',
            copytext: 'LYG127836182763'
        }
    },
    methods: {
        copyText(copytext) {
            const text = document.createElement('textarea'); // 创建节点
            text.setAttribute('readonly', 'readonly');
            text.value = copytext; // 赋值
            document.body.appendChild(text); // 插入节点
            text.setSelectionRange(0, text.value.length);
            text.select(); // 选中节点
            document.execCommand('copy'); // 执行浏览器复制方法
            if (document.body.removeChild(text)) {
                this.$message({ type: 'success', message: '复制成功' })
            } else {
                this.$message({ type: 'error', message: '复制失败' })
            }
        }
    }
}
</script>