vue点击按钮复制文本框内容

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()
        })

原文地址:https://www.cnblogs.com/wuliujun521/p/11551746.html

时间: 2024-11-02 16:14:04

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

vue项目中做点击按钮复制文本框内容

zeroclipboard是走的flash插件,手机浏览器是不支持的,所以不得不舍弃之,用clipboard,clipboard不需要flash就可以完成复制剪切等功能,而且可以兼容pc,移动端 首先要安装:cnpm install clipboard --save 然后引入包 引入:import Clipboard from 'clipboard'; 这个人地方坑会报各种依赖丢失的错,没关系,用下面的方法可以拯救 项目: . 代码: <span class="NetbarNumber&q

常规复制文本框内容的脚本

注:该脚本对非IE内核的浏览器无效.想要兼容全浏览器,可以采用插件+FLASH控件的办法,具体可点击 兼容各浏览器的点击复制文本框内容的Jquery插件 使用方法如下: 引入Jquery后,执行如下函数代码: $(function(){   $("#d_clip_button").click(function(){     var Url=$("#yao_txt").text();    copyToClipboard(Url); });}); 其中copyToCl

点击按钮复制文本内容 -- jquery Zclip -- Zero Clipboard

今天,经理让我做一个功能,复制文本框中的代码.以前在其他网站上经常见到过这个功能.只不过没有细细研究,今天也是个机会. 这里我使用的事jquery的zeroclipboard来实现复制功能.代码内容很简单,网上也有很多资料. Zero Clipboard作为一个独立的js库,它利用 Flash 进行复制,需要两个文件:ZeroClipboard.js 和 ZeroClipboard.swf . 具体实现如下: jsp页面:  <p>                               

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

一.使用qt designer拖拽界面. 使用qtdesigner拖拽界面: 如图左侧导航栏,1:Sources,2:Forms,3:Resouces 1:代码,2:Qt Designer的拖拽界面的代码,xml形式的 3:暂未使用,猜测用来放置一些图片.音频.视频之类的. 在2:Forms中右键点击,然后选择new form,选择 类型:Dialog然后会启动Qt Designer,拖拽出如图的界面. 二.在qt designer中  自定义信号/槽 在Qt Designer的界面中 1:编辑

点击按钮复制文本

点击按钮,进行文本复制操作.实现这个功能需要二点: 一:用window.getSelection().selectAllChildren("")获取要复制的内容 二:用document.execCommand ("Copy");进行复制操作 关键代码 window.getSelection().selectAllChildren(val); document.execCommand ("Copy"); HTML <p id="co

swing复制文本框内容

Clipboard clipboard = Toolkit.getDefaultToolkit().getSystemClipboard(); //得到系统剪贴板 String text = jTextField.getText();  //获取文本框的内容 StringSelection selection = new StringSelection(text);   clipboard.setContents(selection, null);

移动端点击按钮复制文本内容

<div><p>邀请码</p>//<p id="inviteCode" class="inviteCode">{{invite_code}}</p><input id="inviteCode" class="inviteCode" type="text" /><p class="copy">复制</

移动端点击按钮复制文本

话不多说直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="https://cdn.jsdelivr.net/c

JS复制文本到粘贴板,前端H5移动端点击按钮复制文本

<span id="codeNum">FTYHDSDW</span> <span class=" code-btn" id="codeBtn" data-clipboard-target="#input">复制</span> js代码 <script type="text/javascript"> function copyArticle(even