案例

<view class="item">
  <view class="item-title">
    <text>日期</text>
  </view>
  <view class="item-content">
    <view class="item-content-timeBox">
      <u-picker
        mode="time"
        v-model="showStartTimePicker"
        @confirm="confirmStartTime"
      ></u-picker>
      <view
        class="item-content-chooseTime"
        @click.native.stop="chooseStartTime"
        :class="{ noTimeStyle: startTime == null }"
      >
        {{ startTime || "请选择开始日期" }}
        <u-icon
          v-show="startTime != null"
          @click.native.stop="clearStartTime"
          class="clearTimeBtn"
          name="close-circle"
          size="30"
        ></u-icon>
      </view>
    </view>
    <text class="timeBridge">至</text>
    <view class="item-content-timeBox">
      <u-picker
        mode="time"
        v-model="showEndTimePicker"
        @confirm="confirmEndTime"
      ></u-picker>
      <view
        class="item-content-chooseTime"
        @click.native.stop="chooseEndTime"
        :class="{ noTimeStyle: endTime == null }"
      >
        {{ endTime || "请选择结束日期" }}
        <u-icon
          v-show="endTime != null"
          @click.native.stop="clearEndTime"
          class="clearTimeBtn"
          name="close-circle"
          size="30"
        ></u-icon>
      </view>
    </view>
  </view>
</view>

问题:

        点击删除icon时候,触发了下方的picker组件的click事件。

错误:

        如果使用@tap.stop阻止传播 的话会报错:Error: "TypeError: $event.stopPropagation is not a function" 原因是:Uniapp不支持stopPropagation,因为这里的event对象并非浏览器的evnet对象,其本来没有stopPropagation方法,文档中也从未提及支持stopPropagation方法,实现中有stopPropagation方法是为了避免开发者使用引用的第三方代码使用了 stopPropagation后报错。

解决:

        使用@click.native.stop

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐