一、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. 听justjavac大神live前端的入门与进阶小笔记

    代码规范 代码强壮,调试代码 少用变量,多用常量 少用for循环,why循环,多用函数式, 不要直接去使用框架 刷题 提高编程思维 用js去做c语音的问题 阅读别人代码,去看别人的代码 a+b> ...

  2. webpack分离第三方库(CommonsChunkPlugin并不是分离第三方库的好办法DllPlugin科学利用浏览器缓存）

    webpack算是个磨人的小妖精了.之前一直站在glup阵营,使用browserify打包,发现webpack已经火到爆炸,深怕被社区遗落,赶紧拿起来把玩一下.本来只想玩一下的.尝试打包了以后,就想启 ...

  3. ubuntu18.04安装时ACPI error 无法进入系统的问题

    问题描述:安装系统时无法进入图形界面 出现 一堆错误 布拉布拉布拉 [0.101261] ACPI Error: [_ppc] Namespace lookup failure, AE_ALREADY ...

  4. .net core web api 获取request body的纯文本

    本文代码 https://github.com/wuhaibo/readPlainTextDotNetCoreWepApi 总有些时候我们希望获得Request body 的纯文本 那么怎么做呢?很简 ...

  5. ubuntu下dpkg/apt的一些常用命令

    apt-get update 更新源(硬盘缓存的包的版本等)apt-get upgrade 更新包(更新系统中已安装的包,依据缓存包的版本更新)apt-get dist-upgrade 升级系统apt ...

  6. ExtJs之列表(grid)

    --renderers渲染器 可以格式化该列显示的数据格式或者按照你自定义的脚本显示最终数据样子 先看下renderer: function()里的参数 renderer:function(value ...

  7. 验证二叉查找树（LintCode）

    验证二叉查找树 给定一个二叉树,判断它是否是合法的二叉查找树(BST) 一棵BST定义为: 节点的左子树中的值要严格小于该节点的值. 节点的右子树中的值要严格大于该节点的值. 左右子树也必须是二叉查找 ...

  8. UVA 111（LCS问题）

     History Grading  Background Many problems in Computer Science involve maximizing some measure accor ...

  9. [USACO 2018 Open Gold] Tutorial

    Link: 传送门 A: 对于每一条分割线,设本不应在其左侧的个数为$x$ 重点要发现每次一来一回的操作恰好会将一对分别应在左/右侧的一个数从右/左移过去 这样就转直接用树状数组求出最大的$x$即可 ...

  10. 【动态规划】POJ3280- Cheapest Palindrome

    [题目大意] 给出一个字符串,可以删除或添加一些字符,它们各自会消耗价值.问最少消耗多少价值,可以使得字符串变成回文的. [思路] 事实上删除或添加字符的价值只需要保持较小的那一个.假设当前要将(j, ...