1.npm进行安装

npm install clipboard --save 

2.在需要使用的组件中import

引用方法:import Clipboard from 'clipboard';

3.添加需要复制的内容

<button class="tag-read" data-clipboard-text="我是可以复制的内容,请点击复制" @click="copy">立即阅读</button>
解析: data-clipboard-text 后边跟需要复制的内容 4.添加点击后的方法   copy() {
        var clipboard = new Clipboard('.tag-read')
        clipboard.on('success', e => {
          console.log('复制成功')
          // 释放内存
          clipboard.destroy()
        })
        clipboard.on('error', e => {
          // 不支持复制
          console.log('该浏览器不支持自动复制')
          // 释放内存
          clipboard.destroy()
        })

vue点击按钮复制文本框内容的更多相关文章

  1. TEXT文本编辑框4 点击按钮读取文本框内容到内表

    *&---------------------------------------------------------------------* *& Report ZTEST_CWB ...

  2. jquery( 点击按钮出来文本框并限制文本框的个数)

    // 首先呢  编辑这个文章  主要是用于和大家的交流  以便学习和交流!! <div class="form-group" id="spots"> ...

  3. vue中点击按钮复制内容

    <el-button type="primary" round size="mini" @click="copyUrl">复制u ...

  4. 原生 js 实现点击按钮复制文本

    最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...

  5. Py3+PyQt5+Eric6:学习记录之第一天:点击按钮获取文本框的值并输出。

    一.使用qt designer拖拽界面. 使用qtdesigner拖拽界面:

  6. swing复制文本框内容

    Clipboard clipboard = Toolkit.getDefaultToolkit().getSystemClipboard(); //得到系统剪贴板 String text = jTex ...

  7. js实现点击按钮复制文本功能

    最近项目活动中用到复制文本功能,发现在chrome中之前的clipboard的demo失效了,查了下发现是因为版本升级导致的.最新用法如下: <!DOCTYPE html> <htm ...

  8. JavaScript实现点击复制按钮复制文本框的内容,兼容IOS

    <lable> <input type="text" id="txt"> <a href="javascript:;&q ...

  9. vue实现实时监听文本框内容的变化(最后一种为原生js)

    一.用watch方法监听这个变量. <!DOCTYPE html> <html> <head> <meta charset="utf-8" ...

随机推荐

  1. linux文本编辑工具

    文本编辑工具VIM vim 主要有三种工作模式,分别是命令模式.插入模式和编辑模式,输入 vim 文件名 我们可以进入命令模式,输入字符 i或者a或者o我们可以进入插入模式,进入插入模式之后我们可以进 ...

  2. Sqlserver 2008 导出数据库

    sqlserver2008中导出数据库: ①当数据库中的数据量比较大时,可使用备份的方法. 路径可以默认,想自定义就点击[添加],最后[确定]即可. ②当数据量不是很大时,可以采用导出SQL执行语句的 ...

  3. laravel 框架登录 实际操作

    //登录中间件 Route::group(['middleware'=>'checkage'],function (){ Route::get('/mou/list','MouControlle ...

  4. Centos7 环境下设置固定IP

    1. 在/etc/sysconfig/network-scripts/下创建ifcfg-eth0配置文件, 并填入以下内容: DEVICE=eth0 TYPE=Ethernet IPADDR=192. ...

  5. virtualenv和virtualenvwrapper pipenv安装

    virtualenv和virtualenvwrapper pipenv安装 virtualenvwrapper工具 virtualenvwrapper是用来管理virtualenv的扩展包,用着很方便 ...

  6. 浅析 c++ bitset 的用法

    浅析 c++ bitset 的用法 总述 C++的 \(bitset\) 位于 <bitset> 头文件中,这是一种类似于数组的数据结构,每个位置存储 \(0\ or\ 1\) ,并且每个 ...

  7. 通过PROFINET网络实现SINAMICS 120的PN IO OPC通讯,起动及调速控制 | OPC通讯

    1 概述 TCP/IP 通讯的传输时间可能太长,并且该时间具有不确定性,无法满足生产自动化领域的要求.因此,在进行时间要求苛刻的IO 有效载荷数据通讯时,PROFINET IO 不使用TCP/IP,而 ...

  8. bzoj5315/luoguP4517 [SDOI2018]战略游戏(圆方树,虚树)

    bzoj5315/luoguP4517 [SDOI2018]战略游戏(圆方树,虚树) bzoj Luogu 题目描述略(太长了) 题解时间 切掉一个点,连通性变化. 上圆方树. $ \sum |S| ...

  9. 多数据源并且数据库类型不同的情况下PageHelper的使用

    一.问题来源 最近开发一个项目需要依赖两个数据源,数据源类型分别为oracle和postgresql,代码中使用com.github.pagehelper分页插件进行分页,代码运行过程中postgre ...

  10. sp-MVC-ideabaok

    直接通过初始化器创建 或者通过创建maven工程在自己添加需要的东西 配置 dispatcher-servlet.xml 包括扫描加载包: <context:component-scan bas ...