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. Mybatias

    Mybatis 1.简介 1.1丶什么是Mybaties MyBatis 是一款优秀的持久层框架, 它支持自定义 SQL.存储过程以及高级映射. MyBatis 免除了几乎所有的 JDBC 代码以及设 ...

  2. laravel 框架 知识点

    get 方法返回一个包含 Illuminate\Support\Collection 实例的结果,其中每一条记录都是 PHP stdClass 对象的一个实例.你可以通过对象属性的方式来获取每个字段的 ...

  3. 想了解 spring-cloud-kubernetes,那就先来实战一把官方demo

    摘要:官方提供了简单的demo用于快速了解spring-cloud-kubernetes,我们就来一起将此demo源码编译构建,然后在kubernetes环境运行. 本文分享自华为云社区<spr ...

  4. Net之线程池的优点

     使用线程池的好处:     1.减少在创建和销毁线程上所花的时间以及系统资源的开销     2.如不使用线程池,有可能造成系统创建大量线程而导致消耗完系统内存以及"过度切换".

  5. 当前分支拉取master的操作 git rebase master

    使用场景 理解rebase 操作步骤 1 git切换至当前开发版本 2 查找需要变基到的branch,不一定是master 3 执行rebase变基 没有冲突的情况 存在冲突的情况 解决冲突 标记冲突 ...

  6. CF487E Tourists(圆方树+树链剖分+multiset/可删堆)

    CF487E Tourists(圆方树+树链剖分+multiset/可删堆) Luogu 给出一个带点权的无向图,两种操作: 1.修改某点点权. 2.询问x到y之间简单路径能走过的点的最小点权. 题解 ...

  7. CF1500D Tiles for Bathroom (递推+大讨论)

    题目大意:给你一个n*n的矩阵,现在问对于每个k\le n,求出所有k*k的子矩阵中,元素种类数不超过q的矩阵个数,n\le 1500, q\le 10 先考虑最暴力的做法: 对于每个格子,求出以它为 ...

  8. 文件下载文件名包含中文时,乱码的处理方法(url编解码)

    utf-8/gbk编码 "中"这个汉子的utf-8编码为:E4B8AD gbk编码为:D6D0 urlencode 经过urlencode编码后, %E4%B8%AD %D6%D0 ...

  9. 什么是SpringCloudConfig?

    在分布式系统中,由于服务数量巨多,为了方便服务配置文件统一管理,实时更新,所以需要分布式配置中心组件.在Spring Cloud中,有分布式配置中心组件spring cloud config ,它支持 ...

  10. Mybatis 的 Xml 映射文件中,不同的 Xml 映射文件,id 是否可以重复?

    不同的 Xml 映射文件,如果配置了 namespace,那么 id 可以重复:如果没有配 置 namespace,那么 id 不能重复: 原因就是 namespace+id 是作为 Map<S ...