uni-app使用 uViewUI 图标组件拦截冒泡事件报错？

Question

问题描述

使用 uView 这个 UI 库的时候遇到了一个问题，就是 <u-icon> 组件使用 @click.stop 阻止冒泡事件使会提示异常：TypeError: e.stopPropagation is not a function

问题出现的环境背景及自己尝试过哪些方法

看了一下组件的源码，发现 u-icon 组件的 click 事件是自定义事件，没有返回 event，只返回了一个 this.index，所以不能使用 .stop 修饰符来阻止线上冒泡，

看到图标组件的文档中有 stop 属性可以来设置是否阻止事件传播，所以如果直接用 u-icon 组件时可以通过设置 stop 属性来解决冒泡问题。

但是实际业务情况下会遇到更客制化的情况，比如说在一个不可编辑的 u-input 组件中使用 slot 属性传入一个 u-icon 组件来实现一个默认展示向下箭头图标，有值时展示关闭图标来清空 u-input 的值。
这样的话单纯给 u-icon 组添加 stop 属性就不能阻止 u-input 组件的点击事件了。

相关代码

<view @click="onOpenFilter">
  <u--input
    fontSize="13px"
    inputAlign="center"
    disabledColor="transparent"
    border="none"
    placeholderStyle="color:#333;text-align:center;"
    :placeholder="选择日期"
    :value="filter.date"
    disabled
  >
    <u-icon
      name="close-circle-fill"
      slot="suffix"
      v-if="filter.date"
      @click.stop="onClearFilter('date')"
    />
    <u-icon
      name="arrow-down"
      slot="suffix"
      v-else
    />
  </u--input>
</view>

你期待的结果是什么？实际看到的错误信息又是什么？

怎么样解决 u-icon 元素点击事件的冒泡

---

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 1

一般情况下可以使用 stop 属性来阻止u-icon 组件的默认事件。这个是在uIcon文档中有提到的。

如果遇到了问题中描述的情况在 u-input 组件中使用 slot 传入了 u-icon 组件，想要拦截其时间冒泡，可以使用 Vue 提供的修饰符 .native 来配合 .stop 实现 u-icon 组件的事件冒泡。

<u-icon
  name="close-circle-fill"
  slot="suffix"
  v-if="filter.date"
- @click.stop="onClearFilter('date')"
+ @click.native.stop="onClearFilter('date')"
/>

---

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。