vue实现复制功能(项目使用)
安装依赖
npm install --save vue-clipboard2
用法:
import Vue
import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard)
Demo:
<template id="demo">
<div class="container">
<input type="text" v-model="message">
<button type="button"
v-clipboard:copy="message"
v-clipboard:success="onCopy"
v-clipboard:error="onError">复制</button>
</div>
</template>
<script>
new Vue({
el: '#app',
template: '#demo',
data: function () {
return {
message: '啦啦啦,这是复制的内容!'
}
},
methods: {
onCopy: function (e) {
console.log('你刚刚复制: ' + e.text)
},
onError: function (e) {
console.log('无法复制文本!')
}
}
})
</script>
后记:vue简直把懒惰发挥到了极致,为棒棒的自己点赞
vue实现复制功能(项目使用)的更多相关文章
- Vue实战Vue-cli项目构建(Vue+webpack系列之一)
用Vue比较长一段时间了,大大小小做了一些项目,最近想总结一下知识点,出一个Vue+webpack系列,先从项目构建说起--vue-cli. 由于是Vue+webpack这里就不赘述git那些东西,默 ...
- VUE学习笔记之vue cli 构建项目
一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...
- Vue常用开源项目汇总
前言:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...
- Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用
Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用 目录 概要 知识点 完整示例图 代码与资源文件 流程步骤 概要 基于 MVP 最小可行性产品设计理念,我们先完成一个可以 ...
- VUE 安装及项目创建
Vue.js 安装cnpm npm install -g 镜像 cnpm --registry=https://registry.npm.taobao.org 安装 vue.js cnpm insta ...
- vue - 新建一个项目
首先: 要先安装node 及 npm Node.js官方安装包及源码下载地址:http://nodejs.org/ 双击安装,在安装界面一直Next 直到Finish完成安装. 打开控制命令行程序(C ...
- Vue脚手架搭建项目
全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V 创建项目 $ ...
- nginx代理部署Vue与React项目
nginx代理部署Vue与React项目 一,介绍与需求 1.1,介绍 Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务.Nginx是由 ...
- 一步步建立 Vue + Cesium 初始化项目
一步步建立 Vue + Cesium 初始化项目 初始化 Vue 项目 升级 npm npm install -g npm 安装 @vue/cli 和 @vue/cli-service-global ...
- 【转载】 github vue 高星项目
内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...
随机推荐
- FFmpeg 基本用法
FFmpeg FFmpeg 基本用法 本课要解决的问题 1.FFmpeg的转码流程是什么? 2.常见的视频格式包含哪些内容吗? 3.如何把这些内容从视频文件中抽取出来? 4.如何从一种格式转换为另一种 ...
- ACM学习历程—Hihocoder 1233 Boxes(bfs)(2015北京网赛)
hihoCoder挑战赛12 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 There is a strange storehouse in PKU. In this ...
- ACM学习历程—HDU 5446 Unknown Treasure(数论)(2015长春网赛1010题)
Problem Description On the way to the next secret treasure hiding place, the mathematician discovere ...
- bzoj 4540: [Hnoi2016]序列 莫队
题目: 给定长度为n的序列:a1,a2,-,an,记为a[1:n].类似地,a[l:r](1≤l≤r≤N)是指序列:al,al+1,-,ar- 1,ar.若1≤l≤s≤t≤r≤n,则称a[s:t]是a ...
- 【学习笔记-中国剩余定理】POJ1006 Biorhythms
Biorhythms Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 139500 Accepted: 44772 Des ...
- P1330 封锁阳光大学(二分图染色)
题目描述 曹是一只爱刷街的老曹,暑假期间,他每天都欢快地在阳光大学的校园里刷街.河蟹看到欢快的曹,感到不爽.河蟹决定封锁阳光大学,不让曹刷街. 阳光大学的校园是一张由N个点构成的无向图,N个点之间由M ...
- [转]阮一峰:理解RESTful架构
作者: 阮一峰 日期: 2011年9月12日 越来越多的人开始意识到,网站即软件,而且是一种新型的软件. 这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通 ...
- 洛谷【P1175】表达式的转换
浅谈栈:https://www.cnblogs.com/AKMer/p/10278222.html 题目传送门:https://www.luogu.org/problemnew/show/P1175 ...
- Android TextView跑马灯
<TextView android:layout_width="fill_parent" android:layout_height="wrap_content&q ...
- android开发 MyEclipse下测试连接MySQL数据库
1.首先要加载MySQL驱动包. 步骤:右击项目找到build path->configure build path->libraries——>add External JARs添加 ...