安装依赖

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实现复制功能(项目使用)的更多相关文章

  1. Vue实战Vue-cli项目构建(Vue+webpack系列之一)

    用Vue比较长一段时间了,大大小小做了一些项目,最近想总结一下知识点,出一个Vue+webpack系列,先从项目构建说起--vue-cli. 由于是Vue+webpack这里就不赘述git那些东西,默 ...

  2. VUE学习笔记之vue cli 构建项目

    一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...

  3. Vue常用开源项目汇总

    前言:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还 ...

  4. Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用

    Vue + WebApi 小项目:构造自己的在线 Markdown 笔记本应用 目录 概要 知识点 完整示例图 代码与资源文件 流程步骤 概要 基于 MVP 最小可行性产品设计理念,我们先完成一个可以 ...

  5. VUE 安装及项目创建

    Vue.js 安装cnpm npm install -g 镜像 cnpm --registry=https://registry.npm.taobao.org 安装 vue.js cnpm insta ...

  6. vue - 新建一个项目

    首先: 要先安装node 及 npm Node.js官方安装包及源码下载地址:http://nodejs.org/ 双击安装,在安装界面一直Next 直到Finish完成安装. 打开控制命令行程序(C ...

  7. Vue脚手架搭建项目

    全局安装vue脚手架 $ npm install -g vue-cli 卸载方法 $ npm uninstall -g vue-cli 查看vue版本(注意:大写的V) $ vue -V 创建项目 $ ...

  8. nginx代理部署Vue与React项目

    nginx代理部署Vue与React项目 一,介绍与需求 1.1,介绍 Nginx (engine x) 是一个高性能的HTTP和反向代理服务,也是一个IMAP/POP3/SMTP服务.Nginx是由 ...

  9. 一步步建立 Vue + Cesium 初始化项目

    一步步建立 Vue + Cesium 初始化项目 初始化 Vue 项目 升级 npm npm install -g npm 安装 @vue/cli 和 @vue/cli-service-global ...

  10. 【转载】 github vue 高星项目

    内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和 ...

随机推荐

  1. LeetCode:Add Digits - 非负整数各位相加

    1.题目名称 Add Digits (非负整数各位相加) 2.题目地址 https://leetcode.com/problems/add-digits/ 3.题目内容 英文:Given a non- ...

  2. 根据sid或sqlID查询SQL

    根据sid查询已经执行过的sql select sql_text from v$sqlarea a,v$session b where a.SQL_ID=b.PREV_SQL_ID and b.SID ...

  3. bzoj 4537: [Hnoi2016]最小公倍数 分块+并查集

    题目大意: 给定一张n个点m条边的无向图,每条边有两种权.每次询问某两个点之间是否存在一条路径上的边的两种权的最大值分别等于给定值. n,q <= 50000. m <= 100000 题 ...

  4. [转]基于phantomJS实现web性能监控

    1.web性能监控背景描述 上期分享的<Web性能监控自动化探索之路–初识WebPageTest>从依赖webpagetest的角度给出了做性能日常检查的方案,但由于依赖结构相对复杂我们需 ...

  5. Marionettejs

    Marionette是牵线木偶的意思,这个库是对Backbone的一次更高层次封装.这样的封装有两个目标: 减少重复的工作,提高使用Backbonejs时的生产效率给复杂应用页面提供更多的结构,以支撑 ...

  6. Poj 3903 Stock Exchange(LIS)

    一.Description The world financial crisis is quite a subject. Some people are more relaxed while othe ...

  7. 第三课 go语言基础语法

    http://www.runoob.com/go/go-basic-syntax.html 1 行分隔符 在 Go 程序中,一行代表一个语句结束.每个语句不需要像 C 家族中的其它语言一样以分号 ; ...

  8. Redis的安装和配置文件

    实验环境:Centos6.8 Redis版本:3.0.6 下载Redis,并放到/usr/local/soft下: yum -y install gcc automake autoconf libto ...

  9. 解决启动SQL Server Management Studio 17时报Cannot find one of more components...的问题

    刚装好SSMS 17.1准备体验,弹出: 一番搜索,普遍办法都是安装VS2015独立shell.删除某个注册表项什么的,没用,首先这个shell我是装了的,然后也没有那个注册表项.我自己尝试过重装sh ...

  10. HTTP之cookie技术

    Cookie由变量名和值组成, 其属性中既有标准的Cookie变量, 也有用户自己创建的变量,属性中变量是用"变量=值"形式来保存 Cookie格式如下: Set-Cookie: ...