一键复制功能 - Vue
经常遇到一键复制功能,简单记录一下。这里使用的是clipboard插件:https://clipboardjs.com/
第一步
安装:npm install clipboard --save
第二步:
引入:
import clipboard from 'clipboard';
Vue.prototype.clipboard = clipboard;
第三步:
使用:
<button data-clipboard-action="copy" class="cobyDomObj" :data-clipboard-text="复制内容" @click="copyLink">
复制按钮
</button>
copyLink() {
let _this = this;
let clipboardObj = new this.clipboard(".cobyDomObj");
clipboardObj .on('success', function () {
_this.$toast("复制成功")
});
clipboardObj .on('error', function () {
_this.$toast("复制失败")
});
}
一键复制功能 - Vue的更多相关文章
- (英文版)VScode一键生成.vue模板
1. 安装vscode,官网地址 2.安装一个插件,识别vue文件 插件库中搜索Vetur,下图中的第一个,点击安装(Install) 3.新建代码片段 点击Code(代码)-Preferences( ...
- js插件实现一键复制功能
clipboard.js 可以实现纯 JS 的从浏览器复制文本到系统剪贴板的功能. 使用方法: 1. 下载 clipboard.js,并在页面中引入该插件.clipboard.js 下载地址: htt ...
- VSCode 初次写vue项目并一键生成.vue模版
VSCode 写vue项目一键生成.vue模版 1.新建代码片段 文件-->首选项-->用户代码片段-->点击新建代码片段--取名vue.json 确定 2.配置快捷生成的vue模板 ...
- 【vsCode】识别.vue/一键生成.vue模板文件
1.安装插件Vetur 结果 ---> .vue代码识别彩标 2.配置.vue文件模板,以便快速一键生成格式化 2.1新建代码片段 File->Preferences->User S ...
- JS实现一键复制功能
var copyClick = function (d) { var Url2 = $(d).parent().parent().find("#copy_value"); Url2 ...
- cocos2dx 实现文字的一键复制功能(IOS、Android)
1.IOS篇(用OC和C++混编) 头文件声明: public static void copy(std::string str); 实现如下: void copy(std::string str) ...
- H5 页面 上使用js实现一键复制功能
2.解决苹果手机浏览器 无法使用的问题 上面的方法在 iphone 手机 safari浏览器失效的问题 其实就是使用输入框先显示然后模拟选择复制在隐藏输入框
- vscode vue 模版生成,vue 一键生成
vscode vue 模版 继上篇文章(vue 格式化),顺便记录下 vue 模版生成.图片就不在贴了,如果有找不到 vscode 插件商店的可以访问上篇文章. 一.安装 VueHelper 在 vs ...
- vue学习第一天 ------ 临时笔记
学习链接 Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述 http://blog.csdn.net/fungleo/article/detai ...
随机推荐
- 用Anaconda安装本地python包
Anaconda确实带来了很多方便,但是之前也过多的依赖了conda自带的一键下载python包的功能.这不,这几天突然要用FastFM这个包,无奈conda里没有,于是只能从github下载下来,实 ...
- ElasticStack系列之六 & 版本冲突处理之乐观锁
悲观并发控制(PCC) 这一点在关系数据库中被广泛使用.假设这种情况很容易发生,我们就可以阻止对这一资源的访问.典型的例子就是当我们在读取一个数据前先锁定这一行,然后确保只有读取到数据的这个线程可以修 ...
- Java基础-IO流对象之序列化(ObjectOutputStream)与反序列化(ObjectInputStream)
Java基础-IO流对象之序列化(ObjectOutputStream)与反序列化(ObjectInputStream) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.对象的序 ...
- 第10章-Vue.js 项目实战
一.本节内容 掌握项目环境中路由的配置方法 ***** 熟练掌握编写单文件组件的编写 *** 能够使用swiper.js进行轮播图组件的封装 能够使用axios进行数据请求 二.webpack项目的目 ...
- GC的时机
说到JVM,GC(垃圾回收)是非常重要的机制. 那么首先的问题是: GC在什么时候会发生? GC的触发包括两种情况:1.程序调用System.gc()的时候.2.系统自身决定是否需要GC. 系统进行G ...
- Ubuntu 14.04安装和3556sdk环境配置
1.配置为固定ip: vi /etc/network/interfaces 最后添加 iface eth0 inet staticaddress 192.168.1.100netmask 255.25 ...
- 在centos6.5安装pg
环境:centos 6.5系统,连外网. 1.参考pg官方网站进行安装.(按照上面的命令行依次执行就行) https://www.postgresql.org/download/linux/redha ...
- SQL语句(十九)——存储过程(练习)
select * From Student select * From Course select * from SC --INSERT INTO SC (Sno, Cno, Grade) --VAL ...
- ElasticSearch关键概念
Elasticsearch 添加索引 一个存储关联数据的地方 用来指向一个或者多个分片(shards)的逻辑命名空间(logical namespcase) 应用程序直接与索引通信 一个分片(shar ...
- angular4 get,post请求(带参数,与不带参数)
一:在app.module.ts引入HttpMoudle import { BrowserModule } from '@angular/platform-browser'; import { Htt ...