vue实现点击复制 vue-clipboard2

PrinciplesMan

于 2023-04-13 18:28:02 发布

阅读量376

点赞数

分类专栏： # Vue2.0 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/u010227042/article/details/130137071

版权

Vue2.0 专栏收录该内容

239 篇文章

订阅专栏

文章介绍了如何在Vue项目中安装和使用vue-clipboard2插件，通过在main.js中引入并注册，然后在模板中结合v-clipboard指令实现从输入框内容的复制到剪切板。提供了复制成功和失败的回调函数示例。

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

1. 安装vue-clipboard

npm install --save vue-clipboard2

2.main.js引入

import VueClipboards from 'vue-clipboard2'
Vue.use(VueClipboards);

3.案例

第一种方法：直接将变量内容复制至剪切板，暂时没有找到处理数据后再复制的方式

<template>
  <div class="yeluosen">
    <input type="text" v-model="message">
    <el-button 
      icon="el-icon-share" 
      size="mini" 
      style="font-size: 16px;padding: 4px 8px;" 
      title="共享" 
      v-clipboard:copy="scope.row.url" 
      v-clipboard:success="onCopy" 
      v-clipboard:error="onError" 
      @click="share(scope.row.url)"></el-button>
  </div>
</template>

复制时，通过v-clipboard:copy 复制输入的内容：

// 复制成功 or 失败（提示信息！！！）
onCopy: function (e) {
  console.log('复制成功！')
},
onError: function (e) {
  console.log('复制失败！')
}