uni-app uni-icons组件未传递事件对象event

发布于 1周前 作者 zlyuanteng 来自 Uni-App

uni-app uni-icons组件未传递事件对象event

开发环境 版本号 项目创建方式
Windows win10 1809 HBuilderX

操作步骤：

<template>
<div>
<uni-icons type="gear" @click="handleClick($event, 'extraParameter')">
Click me
</uni-icons>
</div>
</template>  

<script>
export default {
methods: {
handleClick(event, extra) {
console.log('Event:', event); // 这将打印事件对象
console.log('Extra parameter:', extra); // 这将打印额外的参数
}
}
</script>  

<style scoped>
button {
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

button:hover {  
    background-color: #0056b3;  
}
</style>

预期结果：

event应该有数据

实际结果：

event是undefined

bug描述：

uni-icons如果要阻止事件冒泡要手动调用event的stopPropagation()方法，但这个组件没有将event传递出来，下面代码是uni-icons组件里面的：

methods: {
_onClick() {
this.$emit('click')
}
}

只要改成如下即可：

methods: {
_onClick(event) {
this.$emit('click', event)
}
}

Harmonyos Next教程
3 回复

你好，看起来你要传click的事件，但是看起来，click的事件作用并不大，你传这个参数想要做什么功能呢？


<view @click=“addCart”><uni-icons @click.stop=“getVersion”><uni-icons></view> 如果view绑定了click事件, 则uni-icons的click.stop不起作用，事件会冒泡，从而触发view的addCart。 我的目标是不要触发addCart

在uni-app中使用uni-icons组件时，如果你发现事件对象event没有被正确传递，这通常是由于事件绑定或事件处理函数中的某些细节问题导致的。以下是一个示例代码，展示如何在uni-app中正确使用uni-icons组件并传递事件对象event。

首先，确保你已经正确安装了uni-icons组件。如果还没有安装，你可以通过以下命令安装：

npm install @dcloudio/uni-ui

然后，在你的pages目录下创建一个新的页面，比如index.vue，并添加以下代码：

<template>
  <view>
    <uni-icons @click="handleIconClick" type="heart" size="30" color="#FF0000"></uni-icons>
  </view>
</template>

<script>
import uniIcons from '@dcloudio/uni-ui/lib/uni-icons/uni-icons.vue';

export default {
  components: {
    uniIcons
  },
  methods: {
    handleIconClick(event) {
      // 这里可以访问到事件对象 event
      console.log('Icon clicked', event);
      
      // 你可以根据需要处理事件，比如获取点击位置
      const { clientX, clientY } = event.touches[0];
      console.log('Click position:', clientX, clientY);
    }
  }
};
</script>

<style>
/* 样式可以根据需要调整 */
</style>

在这个例子中，我们做了以下几件事情：

  1. 引入了uni-icons组件。
  2. 在模板中使用<uni-icons>标签，并绑定了一个@click事件处理器handleIconClick。
  3. 在handleIconClick方法中，我们通过参数event接收到了事件对象，并打印了出来。
  4. 我们还从event.touches[0]中获取了点击的位置信息，并打印了出来。

如果你发现event对象没有被正确传递，请检查以下几点：

  • 确保你使用的是最新版本的uni-ui库。
  • 确保事件处理器的方法名没有拼写错误。
  • 确保@click事件绑定正确无误。
  • 如果在组件内部进行了事件转发，确保事件转发逻辑正确。

通过上述步骤，你应该能够正确地在uni-app中使用uni-icons组件并接收到事件对象event。如果问题依旧存在，请检查你的uni-app和uni-ui的版本是否兼容，并查看相关文档或社区寻求帮助。

回到顶部