Vue实现剪贴板复制功能

2024-12-14 02:40:02

小白单纯记录一下工作中遇到的需求:在vue中如何实现复制功能（注：依赖第三方插件 clipboard）

一. 安装插件

第一种直接npm安装： npm install clipboard --save

第二种： <script src="js/clipboard.min.js"></script>（下载地址：https://clipboardjs.com/）

二. 全局注入（main.js）

import VueClipboard from 'vue-clipboard2'

  Vue.use(VueClipboard)

三. 封装方法方便多次使用

新建一个index.js文件里面存放项目会多次使用的方法

export default{
  install(Vue,opstion){
    //把方法写在vue原型方便调用
   Vue.prototype.copy = function (value) {
    this.$copyText(
     `${value}`
    ).then( res => {
     //这是element的Message 消息提示组件
      this.$message({
       message: "复制成功",
       type: "success"
      });
     },
     err => {
      this.$message.error("复制失败");
     }
    );
   },
  }
}

四. 在需要复制的页面中调用copy方法

<template>
     <el-tooltip class="item" effect="dark" content="复制" placement="bottom">
       <i class="icon copy iconfont" @click.stop="copyCode()"></i>
     </el-tooltip>
    </template>

    <script>

    //直接调用copy方法就可以了
      copyCode(scope) {
      //把需要复制的内容传value
         this.copy(scope.row.date);
       },
    </script>

总结

以上所述是小编给大家介绍的Vue实现剪贴板复制功能，希望对大家有所帮助！

VUE 实现复制内容到剪贴板的两种方法

VUE 复制内容至剪切板(两种使用方法) 复制内容至剪切板使用的是插件'vue-clipboard2',通过官方文档会发现共有两种使用方式. 第一种方式与大多数文章类似,只粘贴代码: <template> <div class="container"> <input type="text" v-model="message"> <button type="button" v-clipb
Vue实现剪贴板复制功能

小白单纯记录一下工作中遇到的需求:在vue中如何实现复制功能 (注: 依赖第三方插件 clipboard) 一. 安装插件第一种直接npm安装: npm install clipboard --save 第二种: <script src="js/clipboard.min.js"></script>(下载地址:https://clipboardjs.com/) 二. 全局注入(main.js) import VueClipboard from 'vue-cl
vue粘贴复制功能的实现过程记录

目录引言 1. 项目需求图展示: 1. 安装第三方插件方法(不推荐) 2. 浏览器自带Document.execCommand()复制方法(不推荐) 3. Clipboard.writeText方法(强烈推荐) 总结引言项目中如果实现粘贴复制功能,目前市面上共有三种方法,均有利有弊,大家可以根据自己项目实际情况依次选择.本节将都会对这三种方法做详细阐述,重点推荐第三种方法. 1. 项目需求图展示: 1. 安装第三方插件方法(不推荐) 这种方法兼容性很好,如果项目只使用了一次,不建议使用.
分别使用vue和Android实现长按券码复制功能

最近分别用vue和Android实现了一个券码复制功能,长按券码会在上方弹出一个拷贝的icon提示,点击icon将券码内容复制到剪贴板.现将一些经验代码分享给大家以供参考.废话不多说,先上效果图 vue实现: npm install clipboard --save <div class="coupon-count-container" @click="closePopBubble"> <ul> <li v-for="(cou
Vue中使用clipboard实现复制功能

clipboard.js 是一个不需要flash,将文本复制到剪贴板的插件.下面给大家介绍Vue中使用clipboard实现复制功能,具体内容如下所示: 首先现在Vue中引入clipboard npm install clipboard --save 在需要使用的组件中import 引入clipboard import Clipboard from 'clipboard'; clipboard的实际使用不论是单按钮复制还是多按钮复制,一定要在页面加载DOM完成后先New出来具有复制功能的按钮,
Vue 实现复制功能,不需要任何结构内容直接复制方式

介绍: 在做复制文档功能时,考虑到是个不太会复用的小功能,最后选择直接用 document.execCommand 方法实现. 在查阅资料时候,发现其他人都需要在页面上写上结构.ID.然后捕捉某个ID获取内容,感觉很不方便. 使用: methods: { copyShaneUrl(shareLink){ var input = document.createElement("input"); // 直接构建input input.value = shareLink; // 设置内容 d
使用ZeroClipboard解决跨浏览器复制到剪贴板的问题

Zero Clipboard的实现原理Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上,这样其实点击的不是按钮而是 Flash ,这样将需要的内容传入Flash,再通过Flash的复制功能把传入的内容复制到剪贴板 Zero Clipboard的安装方法首先需要下载 Zero Clipboard的压缩包,解压后把文件夹中两个文件:ZeroClipboard.js 和 ZeroClipboard.swf 放入到你的项目中. 然后把在你要使用复制功能的页面中引入Zero Cl
JavaScript实现复制功能各浏览器支持情况实测

这两天在做Web前端时,遇到需求通过js实现文本复制的功能. 先不考虑浏览器的兼容性,看看各浏览器对复制功能的支持情况: 1.IE浏览器,解决方法有三种,代码如下: 复制代码代码如下: function copy(txtid){ var txtObj = document.getElementById(txtid); if(window.clipboardData){ // 仅IE支持此对象,firefox.chrome不支持 //1.通过clipboardData对象实现复制 //windo
js 复制功能支持 for IE/FireFox/mozilla/ns

FF,不支持复制功能,要支持的话,很难的 js 复制功能支持 for IE/FireFox/mozilla/ns 代码如下: 这里有两各上方式 : // js 复制功能支持 for IE/FireFox/mozilla/ns function copy_clip(meintext) { if (window.clipboardData) { window.clipboardData.setData("Text", meintext); } else if (window.netsc
GWT中复制到剪贴板 js+flash实现复制兼容性比较好

但是用flash就可以复制.例子就是VeryCd,看"复制选中的连接"按钮是一个flash.看来flash的安全沙箱没有限制将内容复制到剪贴板但是也是有限制的: 1 根据ZeroClipborad的人们说,这些flash必须通过网络加载. Zero Clipboard Does Not Work From Local Disk This is a security restriction by Adobe Flash Player. Unfortunately, since we a

Vue实现剪贴板复制功能

相关推荐

随机推荐