vue 前端剪贴板复制内容

77 阅读1分钟

安装

npm  install vue-clipboard2  --save

main.js 中引用

import VueClipboard from 'vue-clipboard2'

Vue.use( VueClipboard )

<el-table :data="tableData">
   <el-table-column>
     <template slot-scope="{ row }">
        <p>
          <i class="el-icon-document-copy" 
             v-clipboard:copy="row.content"
             v-clipboard:success="onSuccess" 
             v-clipboard:error="onError"
             >
          </i>
          <span :title="row.content">{{row.content}}</span></p>
     </template>
   </el-table-column>
</el-table>

<script>
export default{
 methods:{
   onSuccess(e) {   
    this.$message({
        message: ' 复制成功!',
        type: 'success'
    })
   },
   onError(e) {
    this.$message({
        message: ' 复制失败!',
        type: 'error'
    })
   },
 }
}
</script>