vue项目如何实现剪切板功能--vue-clipboard2
一、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的更多相关文章
- Vue项目中添加锁屏功能
0. 直接上 预览链接 Vue项目中添加锁屏功能 1. 实现思路 ( 1 ) 设置锁屏密码 ( 2 ) 密码存localStorage (本项目已经封装h5的sessionStorage和localS ...
- ASP.NET MVC实现剪切板功能
前言 关于复制粘贴的功能,好像不用劳师动众的写后端代码,JS就可以,但正如大家所知道的,兼容性问题,当然这么通用的功能怎么可能没有一个通用的方案呢,于是便找到了一款jquery插件 jquery.cl ...
- clipboard.js 实现web端---> 复制到剪切板功能
package.json 中: 添加clipboard 依赖 "dependencies": { "vue": "^2.2.2", &quo ...
- android实现文本复制到剪切板功能(ClipboardManager)
Android也有剪切板(ClipboardManager),可以复制一些有用的文本到剪贴板,以便用户可以粘贴的地方使用,下面是使用方法 注意:导包的时候 API 11之前: android.te ...
- .Net Web开发中实现剪切板功能
我要实现的功能是:在列表页,通过一个按钮复制对应的文章Url,如下图: 如下代码: <a class="btn btn-success copy" href=&quo ...
- [.NET开发] C#实现剪切板功能
C#剪切板 Clipboard类 我们现在先来看一下官方文档的介绍 位于:System.Windows.Forms 命名空间下 Provides methods to place data on an ...
- vue项目js实现图片放大镜功能
效果图: 我写的是vue的组件形式,方便复用,图片的宽高,缩放的比例可以自己定义 magnifier.vue <template> <div class="magnif ...
- vue 复制文本到剪切板上
1.下载clipboard.js npm install vue-clipboard2 --save 2.引入,可以在mian.js中全局引入也可以在单个vue中引入 import Clipboard ...
- vue项目中实现扫码功能
项目地址:https://github.com/wkl007/vue-scan-demo.git 项目主要是做的一个扫码的功能 核心代码为 <div class="scan" ...
随机推荐
- laravel中新增路由文件
随着业务的发展,前后台和不同平台的代码都写在一个路由文件里面会非常庞杂,这时候就诞生了拆分路由文件的需求,好在Lavravel给我们提供了支持: 1.在routes文件夹中添加新的路由文件如:admi ...
- OpenStack 计算服务 Nova介绍和控制节点部署 (八)
一)nova在keystone上服务注册 1.1创建nova务实体 [root@controller ~]# source admin-openrc [root@controller ~]# open ...
- oracle 自己改了 spfile 导致起不来
oracle pfile 出错 今天在升级 oracle 内存的时候参数调错了,导致 oracle 起不来, 情急之下用 vim 修改了 spfile 文件,结果由于该文件是二进制的,不能直接修改,所 ...
- 多线程下,Python Sqlite3报[SQLite objects created in a thread can only be used...]问题
明明加了锁保护,还是出了下面的问题 ProgrammingError: SQLite objects created in a thread can only be used in that same ...
- js string trim实现
String.prototype.trim = function() { var str = this, whitespace = ' \n\r\t\f\x0b\xa0\u2000\u2001\u20 ...
- servlet 的控制缓存时间和response的重定向
//控制缓存时间 public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletE ...
- 洛谷P3391文艺平衡树(Splay)
题目传送门 转载自https://www.cnblogs.com/yousiki/p/6147455.html,转载请注明出处 经典引文 空间效率:O(n) 时间效率:O(log n)插入.查找.删除 ...
- Web框架以及两种模式MVC,MTV
一.Web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. import socket def handle_reques ...
- nodemon 基本配置与使用
在开发环境下,往往需要一个工具来自动重启项目工程,之前接触过 python 的 supervisor,现在写 node 的时候发现 supervisior 在很多地方都有他的身影,node 也有一个 ...
- c99柔性数组
变长结构体 struct test { int nSize; char data[]; // 或者 char data[0];但建议使用 char data[]; 注意:c98 时不支持柔性数组,其仅 ...