vue点击按钮复制输入框内容

最新推荐文章于 2024-06-26 11:09:22 发布

iFfy_01

最新推荐文章于 2024-06-26 11:09:22 发布

阅读量703

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_59769148/article/details/126727145

Vue 同时被 2 个专栏收录

14 篇文章

订阅专栏

JavaScript

11 篇文章

订阅专栏

本文介绍了如何在Vue.js项目中实现一键复制内容到剪贴板的功能。首先通过npm安装clipboard库，然后在main.js中全局注册或在组件内局部引入。接着在模板中使用data-clipboard-text属性绑定复制内容，并结合事件监听实现点击复制。成功或失败后，通过message提示用户操作状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、安装依赖

npm install clipboard --save

2、全局注册(在main.js中)

// 全局注册vue一键复制内容到粘贴板
import Clipboard from 'clipboard'
Vue.prototype.Clipboard = Clipboard

或者在需要用的组件中引入

import Clipboard from 'clipboard'

3、使用

:data-clipboard-text 绑定的是复制的值 , 要跟输入框绑定的值保持一致

<el-input v-model="formInline.mac" placeholder="mac地址" />
<div class="copyBtn" :data-clipboard-text="formInline.mac" @click="copy">
   <i class="el-icon-document-copy" />
</div>

JS部分

copy() {
      var clipboard = new this.Clipboard('.copyBtn')
      clipboard.on('success', () => {
        this.$message.success('复制成功')
        clipboard.destroy()
      })
      clipboard.on('error', () => {
        this.$message.error('复制失败')
        clipboard.destroy()
      })
    },