你们好,我是金金金。
场景
- 可以看见我右侧有两个
icon
,点击的时候 会影响到折叠面板
的打开,这让我很是苦恼,然后我使用了@click.stop
修饰符阻止事件冒泡
排查
排查之前我先贴一下代码
- 报错截图
可以看到找不到属性
stopPropagation
,uniapp
的uni-icons组件这里是不能直接这么写的
造成error的原因
@click.stop
不能用在uniapp
uni-icons
上
解决
- 那我们该如何解决这个问题呢?
很简单的。既然我们知道
uniapp
这个组件上用不了,那我们在外面包一层view
组件,我们把点击事件加到view
标签上,这样是不是就可以了呢?代码如下。
<view @click.stop="handlePosition(data)" class="provider-content-right-btn"><uni-icons type="map-pin-ellipse" size="25" />
</view>
<view @click.stop="handleNavigation(data)"><uni-icons type="paperplane" size="25" color="blue" />
</view>
- 测试一下。没有任何问题,非常
nice~
总结
@click.stop
不能用在uniapp
组件uni-icon
s上,我们在外层包裹一层view
标签,将点击事件放在view
标签上即可,希望这个小技巧能帮助到您~
- 编写有误还请大佬指正,万分感谢。