一、vue项目利用vue-clipboard2实现剪切板的功能

　　1、安装vue-clipboard2插件：cnpm install --save vue-clipboard2

　　2、main.js添加

import VueClipboard from 'vue-clipboard2'

Vue.use(VueClipboard)

　　3、copy组件：message绑定需要复制的文本/onCopy复制成功回调/onError复制失败回调

　　v-clipboard:copy="message"

　　v-clipboard:success="onCopy"

　　v-clipboard:error="onError"

二、原生js实现点击按钮，复制文本框中的的内容

<body>

    <textarea cols="" rows="" id="test">用户定义的代码区域</textarea>

    <input type="button" onClick="copyUrl2()" value="点击复制代码" />

</body>

<script type="text/javascript">

function copyUrl2(){

    var Url2=document.getElementById("test");

    Url2.select(); // 选择对象

    document.execCommand("Copy"); // 执行浏览器复制命令

    alert("已复制好，可贴粘。");

}

</script>

vue项目如何实现剪切板功能--vue-clipboard2的更多相关文章

  1. Vue项目中添加锁屏功能

    0. 直接上 预览链接 Vue项目中添加锁屏功能 1. 实现思路 ( 1 ) 设置锁屏密码 ( 2 ) 密码存localStorage (本项目已经封装h5的sessionStorage和localS ...

  2. ASP.NET MVC实现剪切板功能

    前言 关于复制粘贴的功能,好像不用劳师动众的写后端代码,JS就可以,但正如大家所知道的,兼容性问题,当然这么通用的功能怎么可能没有一个通用的方案呢,于是便找到了一款jquery插件 jquery.cl ...

  3. clipboard.js 实现web端---> 复制到剪切板功能

    package.json 中: 添加clipboard 依赖 "dependencies": { "vue": "^2.2.2", &quo ...

  4. android实现文本复制到剪切板功能(ClipboardManager)

    Android也有剪切板(ClipboardManager),可以复制一些有用的文本到剪贴板,以便用户可以粘贴的地方使用,下面是使用方法   注意:导包的时候 API 11之前: android.te ...

  5. .Net Web开发中实现剪切板功能

    我要实现的功能是:在列表页,通过一个按钮复制对应的文章Url,如下图: 如下代码:     <a class="btn btn-success copy" href=&quo ...

  6. [.NET开发] C#实现剪切板功能

    C#剪切板 Clipboard类 我们现在先来看一下官方文档的介绍 位于:System.Windows.Forms 命名空间下 Provides methods to place data on an ...

  7. vue项目js实现图片放大镜功能

    效果图:   我写的是vue的组件形式,方便复用,图片的宽高,缩放的比例可以自己定义 magnifier.vue <template> <div class="magnif ...

  8. vue 复制文本到剪切板上

    1.下载clipboard.js npm install vue-clipboard2 --save 2.引入,可以在mian.js中全局引入也可以在单个vue中引入 import Clipboard ...

  9. vue项目中实现扫码功能

    项目地址:https://github.com/wkl007/vue-scan-demo.git 项目主要是做的一个扫码的功能 核心代码为 <div class="scan" ...

随机推荐

  1. poj 3264(RMQ或者线段树)

    Balanced Lineup Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 42929   Accepted: 20184 ...

  2. mp4文件格式解析(转载)

    mp4文件格式解析 原作:http://blog.sina.com.cn/s/blog_48f93b530100jz4b.html 目前MP4的概念被炒得很火,也很乱.最开始MP4指的是音频(MP3的 ...

  3. Eclipse IDE下的Spring框架使用简单实例

    Eclipse IDE下的Spring框架使用简单实例 1 准备Java jdk安装. Eclipse软件安装.根据系统安装32/64版本,选择Eclipse IDE for Java Develop ...

  4. npoi的基本操作

    ////自动换行               ////自动换行翻译成英文其实就是Wrap的意思,所以这里我们应该用WrapText属性,这是一个布尔属性               //style6. ...

  5. Python 一条语句如何在多行显示的问题

    在做python学习的时候,我照着pdf,敲代码,遇到一大难题: return render_to_response('index.html',{'title':'my page','user':us ...

  6. Java工具类-转换字符编码

    package common; /** *字符串处理公用类 */ public class DealString { /** * 转换字符编码 由“iso-8859-1”西文转换为简体中文 */ pu ...

  7. JSON APIs and Ajax

    1. 通过jQuery来绑定点击事件. 函数 $(document).ready()这个函数中的代码只会在我们的页面加载时候运行一次,确保执行js之前页面所有的dom已经准备就绪. 在$(docume ...

  8. 【BZOJ 1095】 1095: [ZJOI2007]Hide 捉迷藏 （括号序列+线段树）

    1095: [ZJOI2007]Hide 捉迷藏 Description 捉迷藏 Jiajia和Wind是一对恩爱的夫妻,并且他们有很多孩子.某天,Jiajia.Wind和孩子们决定在家里玩捉迷藏游戏 ...

  9. 【BZOJ 2288】 2288: 【POJ Challenge】生日礼物 （贪心+优先队列+双向链表）

    2288: [POJ Challenge]生日礼物 Description ftiasch 18岁生日的时候,lqp18_31给她看了一个神奇的序列 A1, A2, ..., AN. 她被允许选择不超 ...

  10. [BZOJ 1857] 传送带

    Link: BZOJ 1857 传送门 Solution: 首先中间的两个拐点$C,D$肯定都在传送带$A,B$上 接下来感性发现固定点A/C,另一个点C/D时间随位置的变化为单峰函数 这样就是三分套 ...