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

 更新时间:2018年03月17日 11:03:01   作者:Call_me_small_pure  
下面小编就为大家分享一篇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的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 深入浅析Vue全局组件与局部组件的区别

    深入浅析Vue全局组件与局部组件的区别

    这篇文章主要介绍了Vue全局组件与局部组件的区别,通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • 使用vue自定义如何实现Tree组件和拖拽功能

    使用vue自定义如何实现Tree组件和拖拽功能

    这篇文章主要介绍了使用vue自定义如何实现Tree组件和拖拽功能,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 使用vite构建vue3项目的实现步骤

    使用vite构建vue3项目的实现步骤

    通过本文,您可以了解如何使用Vue CLI创建Vue 3项目,配置Vite,利用其优势进行开发,具有一定的参考价值,感兴趣的可以了解一下
    2023-08-08
  • Vue.js状态管理之Pinia与Vuex详解

    Vue.js状态管理之Pinia与Vuex详解

    Pinia和Vuex一样都是是vue的全局状态管理器,其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用了名字Pinia,下面这篇文章主要给大家介绍了关于Vue.js状态管理之Pinia与Vuex的相关资料,需要的朋友可以参考下
    2023-02-02
  • mini-vue渲染的简易实现

    mini-vue渲染的简易实现

    本文主要介绍了mini-vue渲染的简易实现,主要简单来实现一个虚拟dom渲染真实dom,以及更新的方法。具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • Vue 不定高展开动效原理详解

    Vue 不定高展开动效原理详解

    本文主要介绍了Vue不定高展开动效原理详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 解析Vue.js中的组件

    解析Vue.js中的组件

    组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。这篇文章主要介绍了vue.js 中的组件,需要的朋友参考下
    2018-02-02
  • vue @input和@click的区别及说明

    vue @input和@click的区别及说明

    这篇文章主要介绍了vue @input和@click的区别及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10
  • VUE 自定义取色器组件的实现

    VUE 自定义取色器组件的实现

    本文主要介绍了VUE 自定义取色器组件的实现,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-01-01
  • Vue 2.0+Vue-router构建一个简单的单页应用(附源码)

    Vue 2.0+Vue-router构建一个简单的单页应用(附源码)

    这篇文章主要给大家介绍了基于Vue 2.0+Vue-router构建了一个简单的单页应用,文中通过实例介绍的非常详细,并在文末给出了源码下载,需要的朋友可以下载学习参考,下面来一起看看吧。
    2017-03-03

最新评论