Vue中使用clipboard实现复制功能

2024-10-06 22:01:10

clipboard.js 是一个不需要flash，将文本复制到剪贴板的插件。下面给大家介绍Vue中使用clipboard实现复制功能，具体内容如下所示：

首先现在Vue中引入clipboard

npm install clipboard --save

在需要使用的组件中import 引入clipboard

import Clipboard from 'clipboard';

clipboard的实际使用

不论是单按钮复制还是多按钮复制，一定要在页面加载DOM完成后先New出来具有复制功能的按钮，如果在函数内再New那么可能会出现点击复制按钮两次，才复制成功的现象，如下：

mounted() {
  var copybtn = document.getElementsByClassName('btn')
  this.clipboard = new Clipboard(copybtn);
  }
<!--并不一定非要在mounted中也可以在其他周期内，

只要页面已经加载完DOM即可，如果是动态生成可以使用nextTick中New。-->

绑定复制内容的方式有以下几种：

<!--第一种直接绑定在按钮上-->
 <button class="marleft10 btn" style="float: right;border: none;" :data-clipboard-text="2"
    @click="copy()">复制
    </button>
<!--第二种单个复制按钮动态获取需要复制的内容-->
<input type="text" v-model="copyContent" id="copy_text" style="opacity: 0">
<button ref="copy" data-clipboard-action="copy" data-clipboard-target="#copy_text" @click="copy">复制</button>
<!--第三种可以在New Clipboard时设定要复制的内容-->
new Clipboard('copyBtn',function(){
  return <!--要复制的内容-->
})
copy(){
  let _this = this
  <!--如果在内部new会出现点击两次在复制成功的现象所以还请各位多多注意-->
  clipboard.on('success', function () {
    Toast('复制成功')
    _this.destroy() <!--销毁缓存,然后在重新new这样不会出现点击复制上出现之前复制的内容的情况-->
    _this.clipboard = new Clipboard(copyBtn);
  })
  clipboard.on('error', function () {
    Toast('复制失败，请手动复制')
   })
  }

总结

以上所述是小编给大家介绍的Vue中使用clipboard实现复制功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

在vue使用clipboard.js进行一键复制文本的实现示例

需求最近在做商城项目,有个需求是需要点击复制订单号的,然后就觉得可以使用原生的复制方法和使用第三方库. 浏览器原生方法这种方式兼容性不是太好,还要看浏览器是否支持,容易采坑. //在IE中可以用window.clipboardData.setData('text','内容')实现. //在IE中clipboardData是window的属性,而其他浏览器则是相应的event对象的属性,这实际上是一种安全措施,防止未经授权的访问,为了兼容其他浏览器,所以我们不能通过clipboardData来
vue使用pdfjs显示PDF可复制的实现方法

pdf显示的方法方法一使用embed标记来使用浏览器自带的pdf工具. 这种实现方式优缺点都很明显: 优点:自带"打印","搜索","翻页"等功能,强大且实现方便. 缺点:不同浏览器的pdf工具样式不一,且无法满足个性化需求,比如:禁止打印,下载等. 方法二使用Mozilla的PDF.js,自定义展示PDF. 基础功能集成使用Text-Layers渲染(可实现pdf内容复制) 什么是PDF.JS PDF.js是基于HTML5技术构建的,用
Vue 实现复制功能,不需要任何结构内容直接复制方式

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

点击复制功能主要通过 clipboard.js 来实现在vue中使用clipboard.js 时候发现一个问题,就是如果不是input或者button 按钮的话,则复制不成功,使用步骤如下: 1.引入clipboard.js,方法如下: 第一种直接npm安装:npm install clipboard --save 第二种:<script src="js/clipboard.min.js"></script>(下载地址:https://clipboardjs.
浅析vue深复制

Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象.它将返回目标对象. const object1 = { a: 1, b: 2, c: 3 }; const object2 = Object.assign({}, object1); console.log(object2.c); // expected output: 3 或者使用 obj=JSON.parse(JSON.stringify(this.templateData)); //this.te
Vue使用Clipboard.JS在h5页面中复制内容实例详解

安装clipboard.js github路径:https://github.com/zenorocha/clipboard.js 安装: npm install clipboard --save 引入clipboard.js import ClipboardJS from "clipboard"; 或 <script src="https://clipboardjs.com/dist/clipboard.min.js"></script>
VUE 实现复制内容到剪贴板的两种方法

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

1 . npm安装到项目目录文件中 npm install clipboard --save 2 . import 引入文件 import Clipboard from 'clipboard'; 3 . 在需要html元素中的自定义属性中data-clipboard-text 中写入要复制的内容 <button class="copyBtn" :data-clipboard-text = "https://www.baidu.com/" type="
Vue中使用clipboard实现复制功能

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

目录效果如下第一步安装highlight.js 第二步在main.js中引入第三步创建组件效果如图:点击显示代码第四步: 使用组件第五步实现点击复制代码clipboard.js. 本文主要介绍了Vue中使用highlight.js实现代码高亮显示以及点击复制,具体如下: 效果如下第一步安装highlight.js yarn add highlight.js 第二步在main.js中引入 import hl from 'highlight.js' // 导入代码高亮文件
vue中tinymce的使用实例详解

目录 1.下载 2.在node_modules中找到 3.在public中新建 tinymce 文件夹 4.在components文件夹中新建tinymce.vue 5.使用 TinyMCE是流行的富文本编辑JavaScript库.TinyMCE Vue是TinyMCE官方发布的Vue组件,可以更轻松地在Vue应用程序中使用TinyMCE. 1.下载 npm i tinymce@5.10.3 @tinymce/tinymce-vue@3.2.8 -S 2.在node_modules中找到 (我这
浅谈vue中使用图片懒加载vue-lazyload插件详细指南

在vue中使用图片懒加载详细指南,分享给大家.具体如下: 说明当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片,不至于堆叠在一块,或显示大片空白,让用户体验更好一点. 使用方式使用vue的 vue-lazyload 插件插件地址:https://www.npmjs.com/package/vue-lazyload 案例 demo: 懒加载案例demo Installation 安装方式 npm $ npm i vue-lazyload -D CDN CDN: https:
简单理解vue中Props属性

本文实例为大家解析了vue中Props的属性,供大家参考,具体内容如下使用 Props 传递数据组件实例的作用域是孤立的.这意味着不能并且不应该在子组件的模板内直接引用父组件的数据.可以使用 props 把数据传给子组件. "prop" 是组件数据的一个字段,期望从父组件传下来.子组件需要显式地用 props 选项声明 props: Vue.component('child', { // 声明 props props: ['msg'], // prop 可以用在模板内 // 可以
Vue 2.0学习笔记之Vue中的computed属性

Vue中的 computed 属性称为计算属性 .在这一节中,我们学习Vue中的计算属性如何使用?记得在学习Vue的模板相关的知识的时候,知道在模板内可以使用表达式,而且模板内的表达式是非常的便利,但这种遍历是有一定的限制的,它们实际上是用于一些简单的运算.也就是说,如果在模板中放入太多的逻辑会让模板过重而且难以维护.咱们先来看一个示例: <div id="app"> <h1>{{ message.split('').reverse().join('') }}
vue中v-model动态生成的实例详解

vue中v-model动态生成的实例详解前言: 最近在做公司的项目中,有这么一个需求,每一行有一个input和一个select,其中行数是根据服务器返回的json数据动态变化的.那么问题来了,我们要怎样动态生成v-model? 现在项目做完了就整理了一下,直接贴代码了. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <
vue中mint-ui环境搭建详细介绍

vue中mint-ui环境搭建详细介绍首先需要如下配置node (最好用淘宝源) $ npm install -g cnpm --registry=https://registry.npm.taobao.org 以及git 从官方github拉下来mint-ui git clone https://github.com/ElemeFE/mint-ui.git 进入mint-ui npm run dev 全程大概5-10分钟,出现 Build completed in 34.926s Chil
vue中的非父子间的通讯问题简单的实例代码

官网上的例子好晦涩,看了一个头两个大,关于非父子间的通讯问题,经过查阅得到了下面的例子, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>兄弟之间的通讯问题</title> <script src="vue.js"></script> </head>
在Vue中使用echarts的实例代码（3种图）

前言公司的项目中需要对数据做可视化处理,高级点的D3.js目前还没接触到,因此选用了大众化的Echarts, 在vue的生态系统中已经有实现好的vue-echarts,但是使用现成的就意味着必须使用它定制好的数据结构,我也没办法对他进行一些修改.我个人也偏向于原生JS编程,因此没有采用,而是自己在vue中实现了对数据的可视化处理,先来看看效果图以下数据已做脱敏处理这是目前用到的三种图. 可以看到,我在图表的外部添加了标题及说明,以及右侧的选择框组件,视图可以根据选择的不同,图表进行动态切换

Vue中使用clipboard实现复制功能

相关推荐

随机推荐