安装clipboard : npm install clipboard --save
在模板文件中引入: import Clipboard from “clipboard”
具体使用: (这里我用的表格)

 <el-table :data="gridData" border>
        <el-table-column
          prop="documentPath"
          property="date"
          label="文件位置"
          width="600"
        ></el-table-column>
        <el-table-column property="name" label="操作">
          <template slot-scope="scope">
            <div>
              <el-button
                type="success"
                size="mini"
                class="copy-qb"
                @click="copyQbUrl(scope.row.documentPath)"
                >复制链接</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
// 首先请求后台接口,拿到数据赋值给gridData
	
	// 调用的方法 
	copyQbUrl(url) {
      let clipboard = new Clipboard('.copy-qb', {
        text: () => {
          return url
        }
      })
      clipboard.on('success', () => {
        this.$message.success('复制成功!')
        clipboard.destroy()
      })
      clipboard.on('error', () => {
        this.$message.error('该浏览器不支持自动复制,请手动复制!')
        clipboard.destroy()
      })
    }
	


在这里插入图片描述

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐