前端小工具Vue+ElementUI+Clipboard :快捷复制

这篇具有很好参考价值的文章主要介绍了前端小工具Vue+ElementUI+Clipboard :快捷复制。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

我们在日常经常会遇到这种功能(特别多见于C端):

  • 手机上操作不变,想要粘贴个信息比较麻烦,就会出现【点一点复制】
  • 查看敏感信息一般就直接提示【已成功复制粘贴板】
  • 对于网页上一长串显示的文字或者输入的文字,全部选中很长又很麻烦,这时候就提供"快捷复制"的按钮,方便你复制内容

使用场景就是类似的,帮助你更快捷地获取页面的文字信息,当然功能是有利有弊的,要考虑使用场景。

粘贴板的内容也不适于大量文字,会占用内存,影响服务使用性能。

下面就来看看如何在Vue+element的框架中实现。

  • 引入clipboardJS
  • 使用按钮引导点击复制
  • 点击后实现复制到粘贴板功能

引入clipboardJS

官方文档:http://www.clipboardjs.cn/

  "dependencies": {
    "clipboard": "2.0.4",
  }

执行 npm install clipboard --save 进行安装

使用按钮引导点击复制

主要关注copyLink的方法,用一个显眼的icon进行引导,可以增加文字,看需求。

 <el-table v-loading="loading" :data="logList" @selection-change="handleSelectionChange">
      <el-table-column label="条件" align="center" prop="queryParams"  width="600" :show-overflow-tooltip="true" >
        <template slot-scope="scope">
            <p id="params"> {{ scope.row.queryParams }}</p> 
            <el-button type="text" icon="el-icon-copy-document" @click="copyLink(scope.row)" id="copyNode">复制</el-button>
        </template>
      </el-table-column> 
  </el-table> 

点击后实现复制到粘贴板功能

    copyLink (data) {
      let clipboard = new ClipboardJS('#copyNode', {
        text: function () {
          return data.queryParams //这边可以自定义,比如要加一些类似CSDN粘贴后自带的一串引用说明,在这边就可以实现啦
        }
      })
      clipboard.on('success', e => {
        this.$message({message: '复制成功', showClose: true, type: 'success'})//这边提示可以根据平台内的样式调整
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        this.$message({message: '复制失败,', showClose: true, type: 'error'})//这边提示可以根据平台内的样式调整
        clipboard.destroy()
      })
    }

有一些Demo回来页面mounted的时候去新建一个ClipboardJS对象,但是在多个页面切换、多个粘贴板对象使用的情况下,均会被监听,导致调用次数叠加,耗尽内存,所以采用了这种即用即销毁的方式。文章来源地址https://www.toymoban.com/news/detail-460346.html

到了这里,关于前端小工具Vue+ElementUI+Clipboard :快捷复制的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包