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

原创

十月ooOO 2022-06-30 11:13:09 ©著作权

文章标签 vue clipboard 初始化 github 选择器 文章分类 运维

©著作权归作者所有：来自51CTO博客作者十月ooOO的原创作品，请联系作者获取转载授权，否则将追究法律责任

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

Github ClipboardJS https:///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: '复制成功'
           })
       })
    }
}