vue使用Clipboard插件实现前端页面内容复制粘贴的功能

项目场景：

最近项目中有个功能，场景描述如下：
table中操作列，点击该列某一button，复制该row中的某个值到剪贴板中，实现复制粘贴功能。

如果该值存在提示复制成功；若该值为空，则提示该值不存在，且无法实现复制粘贴功能。

解决方案：

1、装包：npm install clipboard --save
2、引入：import Clipboard from ‘clipboard’

3、template与methods代码如下：

<el-table-column label="操作" width="80" align="center" header-align="center">
	<template slot-scope="scope">
		<el-button
			id="copy_demand_path"
            size="medium"
            style="color:#85bf65;font-size:16px;font-weight:600;"
            :data-clipboard-text="scope.row.demandPath"
            type="text"
            @click="copyPath(scope.row.demandPath)"
        ><i class="el-icon-location-outline"></i></el-button>
        <el-button
            size="medium"
            style="color:#1890ff;font-size:16px;font-weight:600;"
            type="text"
            @click="toEdit(scope.row)"
        ><i class="el-icon-edit-outline"></i></el-button>
 	</template>
</el-table-column>

methods: {
    
    
	// 复制需求路径
    copyPath(path) {
    
    
      // console.log(path)
      const clipboard = new Clipboard('#copy_demand_path')
      if (path === '') {
    
    
        this.$message.error('未输入需求路径，请填写后再复制!')
      } else {
    
    
        const self = this
        clipboard.on('success', function() {
    
    
          self.$message.success('需求路径复制成功!')
          // 释放内存
          clipboard.destroy()
        })
        clipboard.on('error', function() {
    
    
          self.$message.error('需求路径复制失败!')
          clipboard.destroy()
        })
      }
    },
}

注意：copy_demand_path是该button的id，注意对应正确！

ok，步骤非常简单，cv即可实现~~