使用VUE实现一键复制内容功能

接到一个需要,需要在pc端实现一键复制粘贴功能,如图所示:

-1

当我点击复制按钮时,会提示“复制成功”,这样复制的内容就可以在其他地方使用了 具体实现方法如下: 我写了一个公共的方法

-2

在调用之前需要先引入,当然可以全局引入,也可以局部引入,因为我只有一个地方用到,所以我是局部引入的:

-3

然后在需要复制的地方直接调用这个方法即可:

-4

代码参考如下:

  1. //这个是写的公共方法
  2. const copyText = function(value, that) {
  3.      const aux = document.createElement(‘input’)
  4.      aux.setAttribute(‘value’, value)
  5.      document.body.appendChild(aux)
  6.      aux.select()
  7.      document.execCommand(‘copy’)
  8.      document.body.removeChild(aux)
  9.      that.$message.success(‘复制成功’)
  10. }
  11. export { copyText }
  1. //这个是引入
  2. import { copyText } from ‘@/utils/copeText’
  1.      copeAddress(data) {
  2.          //data表示要复制的内容
  3.          copyText(data, this) // 这个是调用方法
  4.      },

到此这篇关于使用vue实现一键复制内容功能的文章就介绍到这了,更多相关VUE实现一键复制内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

标签

发表评论