uni-app uni-icons图标点击事件加修饰符报错

uni-app uni-icons图标点击事件加修饰符报错

操作步骤：

<uni-icons type="clear" size="20" color="#c0c4cc" @click.stop="fn"></uni-icons>

这样执行会报错

预期结果：

<uni-icons type="clear" size="20" color="#c0c4cc" @click.stop="fn"></uni-icons>

这样执行会报错

实际结果：

<uni-icons type="clear" size="20" color="#c0c4cc" @click.stop="fn"></uni-icons>

这样执行会报错

bug描述：

<uni-icons type="clear" size="20" color="#c0c4cc" @click.stop="fn"></uni-icons>

这样执行会报错

image


更多关于uni-app uni-icons图标点击事件加修饰符报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

如要阻止事件冒泡，可以尝试在父组件添加一个<view @click.stop>

更多关于uni-app uni-icons图标点击事件加修饰符报错的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我就是这么解决的 但还是希望官方解决一下

在 uni-app 中使用 uni-icons 组件时，如果你尝试在点击事件中添加修饰符（如 .stop、.prevent 等），可能会遇到报错。这是因为 uni-icons 组件本身并不直接支持这些修饰符。

解决方案

你可以通过以下方式来解决这个问题：

1. 使用 @tap 事件

uni-icons 组件默认支持 @tap 事件，你可以直接在 @tap 事件上添加修饰符。

<template>
  <uni-icons type="home" @tap.stop="handleIconClick"></uni-icons>
</template>

<script>
export default {
  methods: {
    handleIconClick() {
      console.log('Icon clicked');
    }
  }
}
</script>

2. 使用 @click 事件并包裹 uni-icons

如果你希望在 @click 事件上使用修饰符，可以将 uni-icons 包裹在一个 view 或 div 中，然后在包裹的元素上添加事件和修饰符。

<template>
  <view @click.stop="handleIconClick">
    <uni-icons type="home"></uni-icons>
  </view>
</template>

<script>
export default {
  methods: {
    handleIconClick() {
      console.log('Icon clicked');
    }
  }
}
</script>

3. 使用 v-on 指令

你也可以使用 v-on 指令来绑定事件，并直接在 v-on 上使用修饰符。

<template>
  <uni-icons type="home" v-on:click.stop="handleIconClick"></uni-icons>
</template>

<script>
export default {
  methods: {
    handleIconClick() {
      console.log('Icon clicked');
    }
  }
}
</script>
回到顶部