vue 项目使用 Clipboard-复制文本或图片到剪贴板

1、安装插件

npm install clipboard --save

2.案例

<template><div><a class="clip-btn" data-clipboard-target="#copytext" href="javascript:void(0);">复制文本</a><div id="copytext"><p>我是富文本</p><img src="../../1.png"/></div></div>
<template><script>
import Clipboard from 'clipboard';
export default {name: 'index',data() {return {btnCopy:'',}}mounted() {this.btnCopy = new Clipboard('.clip-btn',{target: function(trigger) {return document.getElementById('copytext');}})this.btnCopy.on('success', (e) => {console.log('Text:', e.text)this.$message({message: '复制成功', type: 'success'})e.clearSelection()})},beforeDestroy () {   // 销毁clipboardif (this.btnCopy && this.btnCopy.destroy) {  this.btnCopy.destroy()}}}
</script>

vue 项目使用 Clipboard-复制文本或图片到剪贴板相关推荐

Vue项目中tinymce富文本的安装以及配置
Vue项目中tinymce富文本的安装以及配置对于目前网上存在的许多富文本插件中,个人还是觉得tinymce相对比较强大一些.在使用配置的过程中,可能会出现配置不完全,导致使用不了的情况,下面把我个 ...
QT复制文本、图片到剪切板-QClipboard
QT复制文本.图片到剪切板-QClipboard 1. 概述 2. 代码示例 1. 概述复制文本或图片到剪切板在QT中可以使用QClipboard进行操作 2. 代码示例 #include &quo ...
js 复制文字和图片到剪贴板
js 复制文字和图片到剪贴板最近有个需求,要同时复制多张图片和文字到剪贴板,网上找了好多方法,都不行,最后上个厕所,想到直接翻w3c文档,终于实现了.让大家不迷路,共享出来,不用谢,点赞就行. 不多 ...
vue项目中使用富文本wangEditor插件出现的 The given range isn‘t in document错误
背景近期做的后台管理系统,需要有一个富文本编辑器来录入一些API文档的功能.调研时,用UEditor,去github直接下资源包,然后引入到项目中.然而由于项目是一个vue项目,UEditor的实现 ...
vue项目：集成富文本编辑器 - 百度ueditor（vue-ueditor-wrap）
一.背景集成百度ueditor,实现图文编辑二.项目介绍 vue---nuxt项目 vue项目:ueditor(vue-ueditor-wrap) 三.集成步骤 3.1.下载富文本编辑器 GitH ...
vue项目设置img标签的默认图片
方法一: 首先看看以前(非vue)项目是怎么设置img标签的默认图片: // 设置默认图片 <img src="http://res.spreadwin.com/gmc38PE.jpg ...
VUE项目开发，使用canvas实现图片签名编辑手写板功能
vue项目使用canvas实现手写板功能完整的效果图如下: 直接上代码,下面代码可以当做组件直接引用,根据自己的需求传对应的图片即可,操作图标需要自己替换,保存功能也需要自己实现. CanvasDi ...
vue项目实现一键复制粘贴亲测有效
我的项目中需要复制后端返回的xml文件内容,html识别不了换行符,我们使用textarea来展示内同实现带换行格式的展示,另外需要实现对内容的一键复制,复制到剪切板,方便用户粘贴使用,在这里记录实现 ...
复制文本框内容至剪贴板
1 <body> 2 <form id="form1" runat="server"> 3 <div> 4 <text ...

vue 项目使用 Clipboard-复制文本或图片到剪贴板

vue 项目使用 Clipboard-复制文本或图片到剪贴板相关推荐

最新文章

热门文章