项目中要实现分享功能，现在各种接口都关闭了，而且不同的浏览器要使用不同的代码，最后决定直接复制url，然后手动分享

Vue中使用了vue-clipboard2

github地址：https://github.com/Inndy/vue-clipboard2

例子：

 npm install --save vue-clipboard2

main.js引入

 import VueClipboard from 'vue-clipboard2'

 Vue.use(VueClipboard)

组件中的代码：

 <div class="shareline" v-clipboard:copy="copyUrl" v-clipboard:success="onCopy" v-clipboard:error="onError">

    <p>复制链接</p>

 </div>
copyUrl：想要复制的内容，自定义
onCopy：方法，复制成功后操作
onError：方法，复制失败后操作

下面这个也可以
clipboard.js
vue中我最开始用这个了，不知道为什么，点击没有反应
github地址：https://github.com/zenorocha/clipboard.js

例子：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>constructor-node</title>

     <meta name="viewport" content="width=device-width, initial-scale=1">

 </head>

 <body>

     <!-- . Define some markup -->

     <div id="btn" data-clipboard-text="1eqeqweqwe">

         <span>Copy</span>

     </div>

     <!-- . Include library -->

     <script src="../dist/clipboard.min.js"></script>

     <!-- . Instantiate clipboard by passing a HTML element -->

     <script>

     var btn = document.getElementById('btn');

     var clipboard = new ClipboardJS(btn);

     console.log(clipboard)

     clipboard.on('success', function(e) {

         console.log(e);

     });

     clipboard.on('error', function(e) {

         console.log(e);

     });

     </script>

 </body>

 </html>

vue项目中实现复制内容到剪贴板的更多相关文章

  1. vue项目中使用bpmn-节点篇

    前情提要 根据之前的操作,我们可以创建.导入.导出流程图,并对其进预览.通过此篇可以学到: 为节点添加点击.鼠标悬浮等事件 获取流程图内所有指定类型的节点 通过外部更新节点名字 获取节点实例的两种方法 ...

  2. vue项目中使用bpmn-为节点添加颜色

    内容概述 本系列 “vue项目中使用bpmn-xxxx” 分为五篇,均为自己使用过程中用到的实例,手工原创,目前属于陆续更新中.主要包括vue项目中bpmn使用实例.应用技巧.基本知识点总结和需要注意 ...

  3. 《JS实现复制内容到剪贴板功能，可兼容所有PC浏览器，不兼容手机端》

    前记:本来原生的JS是有提供一个函数来实现这个功能(window.clipboardData),但是很遗憾,这个函数仅仅支持IE和FF浏览器,所以基本用处不大.下边介绍的是一个第三方插件库(ZeroC ...

  4. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  5. 使用clipboard.js实现复制内容至剪贴板

    下载插件 clipboard.js是不依赖flash,实现复制内容至剪贴板的js插件.下载clipboard.js的压缩包,根据需要选择dist目录下的压缩或未压缩版. github地址:https: ...

  6. 去除vue项目中的#及其ie9兼容性

    一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...

  7. 转：如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

  8. 在vue项目中 如何定义全局变量 全局函数

    如题,在项目中,经常有些函数和变量是需要复用,比如说网站服务器地址,从后台拿到的:用户的登录token,用户的地址信息等,这时候就需要设置一波全局变量和全局函数 定义全局变量 原理: 设置一个专用的的 ...

  9. 在Vue项目中使用vw实现移动端适配

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

随机推荐

  1. SQL中间

    -- 查询门诊挂号退费的账单:有4条记录 select * from `thc_rcm`.`Cs_AccountBill` a where a.orderSource = 1 and a.orderT ...

  2. 二、linux IO 编程---系统调用和POSIX标准和标准IO

    2.1 系统调用 2.1.1 概念 所谓系统调用(system call)是指曹错系统提供给用户程序的一组“特殊”接口,用户程序可以通过这组“特殊”接口来获得操作系统内核提供的特殊服务. 应用程序可以 ...

  3. javascript 正则表达式总结

    为什么要使用正则表达式 正则表达式通过由普通字符和特殊字符组成的文字模板完成对字符串的校验,搜索,替换.在javascript中类似这样 /^1\d{10}$/ 复制代码 上面的这个简单的正则用来匹配 ...

  4. Servlet 起航 文件上传 中文文件名下载

    @WebServlet(name = "ticketServlet",urlPatterns = {"/tickets"},loadOnStartup = 1) ...

  5. springboot的@CrossOrigin注解解决细粒度的配置跨域

    import java.util.HashMap; import org.springframework.web.bind.annotation.CrossOrigin; import org.spr ...

  6. mybatis 动态sql 插入报错

    1. 值为null必须制定jdbcType 单条执行的话,可以考虑把值为null的字段去掉 2. 值的类型无法解析 比如oracle.sql.TIMESTAMP类型,需转为java.sql.TIMES ...

  7. day 4 - 1 列表

    1.列表的增删改查 1) append insert extend li = ["ysg",[1,2,3,4,5],"peipei","梦幻" ...

  8. OGG选择捕捉和应用模式

    本章包含的信息可帮助您确定适用于数据库环境的捕获和应用模式. 主题: Oracle GoldenGate捕获和应用进程概述 决定使用哪种捕捉方法 决定使用哪种应用方法 同时使用不同的捕捉和应用模式 切 ...

  9. UVA1660 电视网络 Cable TV Network

    题目地址:UVA1660 电视网络 Cable TV Network 枚举两个不直接连通的点 \(S\) 和 \(T\) ,求在剩余的 \(n-2\) 个节点中最少去掉多少个可以使 \(S\) 和 \ ...

  10. TensorFlow学习笔记：共享变量

    本文是根据 TensorFlow 官方教程翻译总结的学习笔记,主要介绍了在 TensorFlow 中如何共享参数变量. 教程中首先引入共享变量的应用场景,紧接着用一个例子介绍如何实现共享变量(主要涉及 ...