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">

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

 

展开阅读全文

没有更多推荐了,返回首页