一、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. [设计模式-行为型]模板方法模式(Template Method)

    一句话 定义一个操作中的算法的骨架,而将一些步骤延迟到子类中. 概括

  2. 基于flask和百度AI接口实现前后端的语音交互

    话不多说,直接怼代码,有不懂的,可以留言 简单的实现,前后端的语音交互. import os from uuid import uuid4 from aip import AipSpeech from ...

  3. window下线程同步之（Semaphores（信号量）)

    HANDLE WINAPI CreateSemaphore( _In_opt_ LPSECURITY_ATTRIBUTES lpSemaphoreAttributes _In_ LONG lIniti ...

  4. 如何将json拼接在url后面当做地址栏参数？

    function param(data) { let url = '' for (var k in data) { let value = data[k] !== undefined ? data[k ...

  5. Spring学习（二）——Spring中的AOP的初步理解

    [前面的话] Spring对我太重要了,做个关于web相关的项目都要使用Spring,每次去看Spring相关的知识,总是感觉一知半解,没有很好的系统去学习一下,现在抽点时间学习一下Spring.不知 ...

  6. 四十四 常用内建模块 struct

    准确地讲,Python没有专门处理字节的数据类型.但由于str既是字符串,又可以表示字节,所以,字节数组＝str.而在C语言中,我们可以很方便地用struct.union来处理字节,以及字节和int, ...

  7. es6解构赋值总结

    数组的解构赋值 1.简单的赋值方式 2.多维数组解构赋值 3.默认值,只有当右边对应位置为undefined时候才会选择默认(null不属于undefined) 4.左右不对等,会相应的对号入座,没有 ...

  8. js禁止页面所有a链接访问

    <script type="text/javascript"> var arr=document.getElementsByTagName("a") ...

  9. cookie使用和销毁

    一.cookie导读,理解什么是cookie 1.什么是cookie:cookie是一种能够让网站服务器把少量数据(4kb左右)存储到客户端的硬盘或内存.并且读可以取出来的一种技术. 2.当你浏览某网 ...

  10. thinkphp图片上传+validate表单验证+图片木马检测+缩略图生成

    目录 1.案例 1.1图片上传  1.2进行图片木马检测   1.3缩略图生成   1.4控制器中调用缩略图生成方法 1.案例 前言:在thinkphp框架的Thinkphp/Library/Thin ...