VUE以及原生js实现像企查查那样点击按钮实现复制文本的功能实例

 

 这里解释下代码：

：data-clipboard-text是指的是复制的文本

@click是点击复制的方法

              {{ $t("common.copy") }}

import Clipboard from 'clipboard';

//点击复制的方法
		copy() {
				var clipboard = new Clipboard('.copyBox')
				clipboard.on('success', e => {
           this.$message({
            message: '复制成功',
            type: 'success'
          })
					// 释放内存
					clipboard.destroy()
				})
				clipboard.on('error', e => {
					// 不支持复制
           this.$message({
            message: '该浏览器不支持自动复制',
            type: 'error'
          })
					// 释放内存
					clipboard.destroy()
				})
			},




  .el-icon-document-copy {
        color: #2972fa;
      }
      .copyBox {
        margin-left: 2px;
        color: #2972fa;
        font-size: 12px;
        cursor: pointer;
      }

原生实现复制功能

 

参考原文：

Vue实现点击按钮复制文本内容的例子 - 简书 (jianshu.com)

【点击按钮 复制文本】实现点击按钮复制文本内容（vue和uniapp两种方式实现）_vue点击复制文本_小跳不会Coding的博客-CSDN博客