阻止el-checkbox内层冒泡

最新推荐文章于 2024-06-22 21:00:00 发布

是泡沫呀

最新推荐文章于 2024-06-22 21:00:00 发布

阅读量1.4k

点赞数 3

分类专栏： vue全家桶文章标签： elementui vue.js javascript 前端前端框架

本文链接：https://blog.csdn.net/qq_51657072/article/details/124631753

版权

vue全家桶专栏收录该内容

11 篇文章 1 订阅

订阅专栏

这篇博客探讨了在Vue中如何处理el-checkbox和嵌套的el-image组件的点击事件。通过使用@click.stop.prevent防止事件冒泡，实现了两个组件各自独立的点击功能。示例代码展示了如何在image-btn组件外层添加div并阻止冒泡，以及在el-checkbox-group中处理点击事件。

摘要由CSDN通过智能技术生成

当采用el-checkbox，内层嵌套el-image，两个组件同时具备点击，而且是组件自带的点击

          <el-checkbox-group v-model="auditSetting.hi_photo">
            <el-checkbox v-for="item in settingInfo.hi_photo" :key="item.id" :label="item.id">
              <div v-redDot="item.state === 3">
                <div @click.stop.prevent="() => {}">
                  <image-btn
                    style-text="width: 50px; height: 50px"
                    :url="item.url"
                    :preview-src-list="hiPhoto(settingInfo.hi_photo)"
                  />
                </div>
                <br>
                {{ item.id }}
              </div>
            </el-checkbox>
          </el-checkbox-group>

如上图代码，image-btn是进行二次封装的el-image，在这个组件外层再加一个div，并带上点击阻止冒泡

<template>
  <div v-if="isShow" class="image-btn">
    <el-image
      :src="url"
      :style="styleText"
      :preview-src-list="previewSrcList"
      :fit="fitText"
      @click.stop.prevent="imgClick($event)"
    />
  </div>
</template>

<script>
export default {
  name: 'ImageBtn',

即 @click.stop.prevent="() => {}"