一、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. Maximum Subarray——经典

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  2. [前端随笔][JavaScript][自制数据可视化] “中国地图”

    说在前面 想自己实现一个可视化的中国地图(可以实现如用户来源省份数据统计功能),网上搜了一下,翻了几页几乎都是第三方库(如echarts.js)实现的,简直不能忍. 不是第三方库不好,只是要花时间去适 ...

  3. SQL快速入门 ( MySQL快速入门, MySQL参考, MySQL快速回顾 )

    SQL 先说点废话,很久没发文了,整理了下自己当时入门 SQL 的笔记,无论用于入门,回顾,参考查询,应该都是有一定价值的,可以按照目录各取所需.SQL数据库有很多,MySQL是一种,本文基本都是SQ ...

  4. Linux各发行版本及其软件包管理方法

    Linux发行版本有很多,按照使用领域分为桌面系统领域和服务器领域.下面简要介绍如下: 1.Red Hat和Fedora:redhat最早发行的个人版本的Linux,自从Red Hat 9.0版本发布 ...

  5. 【剑指offer】面试题 15. 二进制中 1 的个数

    面试题 15. 二进制中 1 的个数 题目描述 题目:输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. Java 实现 方法一 public class Solution { // y ...

  6. css自媒体查询

    准备工作1:设置Meta标签 首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果: <meta name="viewport" content=& ...

  7. Mongo Connector for BI

    官网地址:https://www.mongodb.com/products/bi-connector 它目前包含两个组件: mongosqld:mongosqld接受来自SQL客户端的传入请求,并将这 ...

  8. HDU 5128.The E-pang Palace-计算几何

    The E-pang Palace Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 512000/512000 K (Java/Othe ...

  9. HDU 6073 Matching In Multiplication（拓扑排序）

    Matching In Multiplication Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 524288/524288 K ( ...

  10. EXISTS运算符

    和IN.ANY.ALL等运算符不同,EXISTS运算符是单目运算符,它不与列匹配,因此它也不要求待匹配的集合是单列的.EXISTS运算符用来检查每一行是否匹配子查询,可以认为EXISTS就是用来测试子 ...