nutui icon indicating copy to clipboard operation
nutui copied to clipboard

[bug] Cell Slots中使用Layout,会导致Cell和Row的@click事件全部失效

Open emorywang opened this issue 2 years ago • 1 comments

问题描述

在Cell中使用自定义插槽,其中再套用《Layout布局》(nut-row及nut-col)的话,会导致Cell层级的@click事件失效无法触发,同时nut-row的@click事件也失效无法触发,只有把@click事件加在nut-col时才能触发。

预期的行为和实际行为

如果只定义了一个层级的@click事件,应使其生效可触发。谢谢

复现步骤,具体代码

<template>
  <view>
    <nut-cell @click="cellClick">
      <template #default>
        <nut-row @click="rowClick">
          <nut-col :span="24"> 点击事件测试 </nut-col>
        </nut-row>
      </template>
    </nut-cell>
  </view>
</template>
<script>
export default {
  setup() {
    const cellClick = () => {
      console.log('cell点击事件')
    }
    const rowClick = () => {
      console.log('row点击事件')
    }
    return { cellClick, rowClick }
  }
}
</script>

相关环境信息

  • 操作系统:Windows 10
  • Node 版本:16.15.0
  • NutUI 版本: 3.1.21/taro 3.4.12
  • Vue 版本:3.2.31
  • 引用方式: NPM

emorywang avatar Jun 22 '22 07:06 emorywang

@emorywang 这个是组件内部的点击事件阻止了冒泡,不能触发父级的事件。

LadyChatterleyLover avatar Jul 26 '22 08:07 LadyChatterleyLover