clipboardJS 的使用 vue 中如何使用剪贴板 ClipboardJS

最新推荐文章于 2024-08-05 09:32:07 发布

十月ooOO

最新推荐文章于 2024-08-05 09:32:07 发布

阅读量1k

点赞数

分类专栏： # Vue 文章标签： vue clipboard

本文链接：https://blog.csdn.net/KimBing/article/details/118468996

版权

Vue 专栏收录该内容

68 篇文章 3 订阅

订阅专栏

这篇博客介绍了如何在Vue项目中集成和使用clipboardJS库来实现复制文本到剪贴板的功能。通过在DOM元素上设置data-clipboard-text属性，并在Vue的mounted生命周期钩子中初始化clipboardJS实例，可以轻松实现点击按钮复制内容。此外，还展示了添加成功复制后的提示信息，并给出了一个实际应用的例子链接。

摘要由CSDN通过智能技术生成

clipboardJS 的使用 vue 中如何使用剪贴板 ClipboardJS

Github ClipboardJS https://github.com/zenorocha/clipboard.js

一、在需要的 dom 中添加复制内容

写在 dom 的属性 data-clipboard-text 里

<div class="clipboard-text" data-clipboard-text="这里就是内容了"></div>

二、初始化

然后，再初始化一下即可

let clipboard = new ClipboardJS('.clipboard-text') // 参数是选择器，类名 id名 都可以

这样，点击上面那个 div 就会将 data-clipboard-text 的内容复制到粘贴板里了

三、 Vue 中使用 `clipboardJS`

基础操作还是上面的步骤，只是有点小区别

<div class="lnglat" :data-clipboard-text="`[${lng}, ${lat}]`"></div>
<!-- 比如这里我需要复制 [117.153197, 36.503564] 类似这样的内容 -->

import ClipboardJS from 'clipboard' // 引入 clipboardJS

export default {
    mounted() {
        let clipboard = new ClipboardJS('.lnglat') // 初始化
      
        clipboard.on('success', ()=>{  // 还可以添加监听事件，如：复制成功后提示
           this.$message({
               type: 'success',
               message: '复制成功'
           })
       })
    }
}