复制功能-使用clipboard插件

关于需求

1.点击图片，复制某个标签里面的内容，到微信或者其他地方能长按粘贴出来刚刚复制的内容

关于插件

1.npm 插件安装链接 （https://www.npmjs.com/package/clipboard）
2.插件安装

$npm install clipboard --save

3在需要的地方添加相应的代码即可
（1）先引入文件

（2）添加.vue文件

<script>
import Clipboard from 'clipboard'
import CopyLogo from './assets/copy@2x.png'
export default {
  data () {
    return {
      open: true,
      text: '6225 7819 0992 6542'
    }
  },
  methods: {
    close () {
      this.open = false
    },
    copyFun () { // 点击复制的方法
      var clipboard = new Clipboard('.btn_box_copy') // 这里的dom要对应上标签里点击的按钮的dom
      clipboard.on('success', e => {
        this.$antdMessage.success('复制成功')
        // 释放内存
        clipboard.destroy()
      })
      clipboard.on('error', e => {
        // 不支持复制
        console.log('该浏览器不支持自动复制')
        // 释放内存
        clipboard.destroy()
      })
    }
  },
  render () {
    return <div>
      <div>
    需要复制的内容：<span>{this.text}</span>
      </div>
      <div>
        <img src={CopyLogo}
          style='width:20px;height:20px;color:blue;cursor:pointer;'
          data-clipboard-text={this.text}
          class="btn_box_copy"
          onClick={this.copyFun}
        />
      </div>
    </div>
  }
}
</script>

PS

参考代码： https://gitee.com/sjrwyu/components_demo.git

最后

以上就是喜悦超短裙为你收集整理的js 复制功能的实现复制功能-使用clipboard插件的全部内容，希望文章能够帮你解决js 复制功能的实现复制功能-使用clipboard插件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。