vue iview的小坑之icon不能直接加点击事件

最近因为项目新增需求，遇到了一个小坑，特此记录一下。主要是iview的坑。项目使用框架是：vue+iview

要实现的功能是实现点击复制图标达到复制功能（完成ctrl+v的功能）。

代码大概如下：

页面：

 <span @click="clickCopy(item.to)">  item.to是循环出来的内容，这里写你要复制的内容
   <Icon type="ios-copy-outline" size="24" style="vertical-align: top;"/>
 </span>

方法：

clickCopy(text) {
                this.$tools.copyText(text) 这个方法是放在tools.js中的公共方法，所以写的是this.$tools.copyText
                this.$Message.config({提示框，根据需要，可改成其他形式
                    content: '复制成功',
                    duration: 2,
                    top: 300,
                });
                this.$Message.success({
                    content: '复制成功'
                });
            }

export function copyText(text) {
      var input = document.getElementById("input_copy");
      input.value = text; // 修改文本框的内容
      input.select(); // 选中文本
      document.execCommand("copy"); // 执行浏览器复制命令
}

坑：iview的icon不能直接加点击事件。

解决1：我的解决方法是外边包了一层span标签。将点击事件加到span标签上。

解决2：：原生事件要加修饰符。<Icon @click.native="handleClickFunction">

以上是我在工作中实际遇到的问题，记录一下，希望对大家有所帮助。如果我写的文章有错误，欢迎大家批评指正哈。