el-icon 集成复制功能

By paopao | | No Comments | element ui, vue

1、安装v-clipboard插件

命令如下

#使用npm安装

npm install --save v-clipboard

#使用yarn安装

yarn add v-clipboard

2、main.js引入


具体代码如下

import Clipboard from 'v-clipboard'

Vue.use(Clipboard)

3、使用

<el-icon class="el-icon-document-copy" @click="copy_data(short_url)">


//复制内容
copy_data(data){
  this.$clipboard(data).then(() => {
    this.$message.success('复制成功')
  }).catch(err=>{
    console.log(err)
  })
}

4、此时我们会发现并没有生效也没有报错，那么该怎么解决呢
将 @click 改为 @click.native 即可

完成代码如下

<el-icon class="el-icon-document-copy" @click.native="copy_data(short_url)"></el-icon>
Tagged , ,