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

本文链接：https://blog.csdn.net/m0_59157023/article/details/130060427

这里解释下代码：

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

@click是点击复制的方法

<i class="el-icon-document-copy"></i>
              <span
                 class="copyBox"
                  :data-clipboard-text="item.orderNum"
                  @click="copy"
                >{{ $t("common.copy") }}</span>

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;
      }

原生实现复制功能