vue 实现复制内容到粘贴板clipboard的方法

1 . npm安装到项目目录文件中

npm install clipboard --save

2 . import 引入文件

import Clipboard from 'clipboard';

3 . 在需要html元素中的自定义属性中data-clipboard-text 中写入要复制的内容

<button class="copyBtn" :data-clipboard-text = "https://www.baidu.com/" type="text">复制地址</button>

4 . 在JavaScript中通过类名找到元素中的内容。

let clipboard = new Clipboard('.copyBtn');

就是这个样子了，如果需要这个地址，直接在方法中引用clipboard这个变量就可以了，不需要的话就不用管这个变量，它不需要做任何处理，单击那个类名为copyBtn的按钮以后，直接Ctrl+v就可以了.

以上这篇vue 实现复制内容到粘贴板clipboard的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • jQuery实现复制到粘贴板功能
  • JavaScript复制内容到剪贴板的两种常用方法
赞 (0)

相关推荐

  • JavaScript复制内容到剪贴板的两种常用方法

    常见方法 查了一下万能的Google,现在常见的方法主要是以下两种: 第三方库:clipboard.js 原生方法:document.execCommand() 分别来看看这两种方法是如何使用的. clipboard.js 这是clipboard的官网:https://clipboardjs.com/,看起来就是这么的简单. 引用 直接引用: <script src="dist/clipboard.min.js"></script> 包: npm install

  • jQuery实现复制到粘贴板功能

    项目中突然需要使用复制功能,在网上搜索了下看到了ZeroClipboard插件,好用,但是也有局限.用法如下: 1.引用jquery.zclip.js.swf文件. demo地址:https://github.com/chaoli920029342/jquery_copy 2.初始化 <body> <input type="text" name="text" id="text" value="http://www.ba

  • vue 实现复制内容到粘贴板clipboard的方法

    1 . npm安装到项目目录文件中 npm install clipboard --save 2 . import 引入文件 import Clipboard from 'clipboard'; 3 . 在需要html元素中的自定义属性中data-clipboard-text 中写入要复制的内容 <button class="copyBtn" :data-clipboard-text = "https://www.baidu.com/" type="

  • js复制文本到粘贴板(Clipboard.writeText())

    js复制文本到粘贴板(Clipboard.writeText())

    目录 复制文本到粘贴板(Clipboard.writeText()) 网上的代码 clipboard.js Clipboard.writeText() 复制内容到剪贴板(无插件,兼容所有浏览器) 复制文本到粘贴板(Clipboard.writeText()) js如何复制文本到粘贴板呢,网上所说的各种复制..在Chrome或者说在我这个项目都没用. windows.copy document.execCommand(“copy”); clipboard.js Clipboard.writeTex

  • JavaScript实现复制内容到粘贴板代码

    最近做了一个前端项目,其中有需求:通过button直接把input或者textarea里的值复制到粘贴板里.下面小编把我实现思路及代码分享给大家,大家可以直接引入项目中. 具体代码如下所示: function copyToClipboard(elem) { // create hidden text element, if it doesn't already exist var targetId = "_hiddenCopyText_"; var isInput = elem.tag

  • VUE 实现复制内容到剪贴板的两种方法

    VUE 复制内容至剪切板(两种使用方法) 复制内容至剪切板使用的是插件'vue-clipboard2',通过官方文档会发现共有两种使用方式. 第一种方式与大多数文章类似,只粘贴代码: <template> <div class="container"> <input type="text" v-model="message"> <button type="button" v-clipb

  • Web js实现复制文本到粘贴板

    Web js实现复制文本到粘贴板

    本文实例为大家分享了Web js实现复制文本到粘贴板的具体代码,供大家参考,具体内容如下 一.简述 记--简单用js实现将元素的文本内容复制到粘贴板. 二.效果 三.代码 <!DOCTYPE html> <html>   <head>     <meta charset="utf-8" />     <title>js复制内容到粘贴板</title>     <script type="text/j

  • H5 js点击按钮复制文本到粘贴板

    本文实例为大家分享了js点击按钮复制文本到粘贴板的具体代码,供大家参考,具体内容如下 准备:先去下载clipboard.js: 官网 移动端效果如下: 应用:html+js 代码如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="wid

  • JS复制对应id的内容到粘贴板（Ctrl+C效果）

    前言 最近在做一个按钮,实现的效果是当点击后复制url到黏贴板,但不是当前页面url,而是对应一个元素的url,且一个页面会有多个url.一开始找到一个方法,但是竟然只兼容IE浏览器,神奇了,竟然有只兼容IE的东西.后来发现一个zeroclipboard.js这个插件,但是怎么也搞不出那个效果,有点麻烦. 最后翻到了一个js封装好的方法,有效! 想要实现的一个效果是,下面html代码: <tr> <td> <a id="copy_{$key}" oncli

  • JS复制特定内容到粘贴板

    <script language="javascript"> function readTxt() { alert(window.clipboardData.getData("text")); } function setTxt() { var t=document.getElementById("txt"); t.select(); window.clipboardData.setData('text',t.createTextRa

  • vue实现点击复制到粘贴板

    vue实现点击复制到粘贴板

    本文实例为大家分享了vue实现点击复制到粘贴板的具体代码,供大家参考,具体内容如下 背景: 业务开发中遇到,点击复制内容到粘贴板的需求,记录一下 效果: 关键代码: copyText() {       const oInput = document.createElement('input')       oInput.value = this.textarea       document.body.appendChild(oInput)       oInput.select()    

  • 基于js实现复制内容到操作系统粘贴板过程解析

    一.如果只考虑IE浏览器,可以直接用原声js实现(兼容IE.谷歌.火狐等浏览器) if(window.clipboardData){ //清空操作系统粘贴板 window.clipboardData.clearData(); //将需要复制的内容复制到操作系统粘贴板 window.clipboardData.setData("Text", "要复制的内容"); } 二.如果是其他浏览器,上面的办法行不通,其他浏览器出于安全的考虑禁止js访问操作系统粘贴板. 这里需要

随机推荐