vue click.stop解决父元素和子元素，互相影响的点击事件

最新推荐文章于 2024-10-09 10:18:13 发布

知知洋洋

最新推荐文章于 2024-10-09 10:18:13 发布

阅读量1.1k

点赞数

分类专栏： js vue 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/fred8/article/details/129120300

版权

js 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

vue

16 篇文章 0 订阅

订阅专栏

@click.stop=“Fullscreen(id)”

<div class="equipment">
                <div class="equipment-img">
                  <div class="video-box">
                    <div
                      v-show="!item.startBtn"
                      class="video-start"
                      :style="{
                        'background-image': 'url(' + item.img + ')',
                      }"
                      @click="
                        startVideo(
                          'video' + item.gbId,
                          item.rootId,
                          item.gbId,
                          item.status,
                          item.videoSource
                        )
                      "
                    >
                      <div class="video-status1" v-if="item.status == 2"></div>
                      <div class="video-status2" v-if="item.status == 1"></div>
                      <i
                        class="el-icon-full-screen video-status3"
                        @click.stop="Fullscreen('video' + item.gbId)"
                      ></i>
                    </div>
                    <div
                      :id="'video' + item.gbId"
                      class="video-js vjs-default-skin video_show"
                      controls
                      width="393px"
                    ></div>
                  </div>
                </div>
                <div class="equipment-bottom">
                  <div>
                    <div class="equipment-des">设备ID：{{ item.gbId }}</div>
                    <div class="equipment-des">
                      设备名称：

                      <el-tooltip
                        class="item"
                        effect="dark"
                        :content="item.name"
                        placement="top-start"
                      >
                        <span>
                          {{
                            item.name.length > 10
                              ? item.name.slice(0, 10) + "..."
                              : item.name
                          }}</span
                        >
                      </el-tooltip>
                    </div>
                    <div class="equipment-des">
                      安装区域：{{ item.parentName }}
                    </div>
                    <div class="equipment-des">
                      状态：{{ item.status == 2 ? "在线" : "离线" }}
                    </div>
                  </div>
                  <div>
                    <div style="marginTop:15px">
                      <a-button
                        type="primary"
                        @click="paymoney('pay', item)"
                        style="width:100px"
                        >申请设备</a-button
                      >
                    </div>
                    <div style="marginTop:10px" v-if="carType(item.gbId)">
                      <a-button @click="addCar(item)" style="width:100px"
                        >加购物车</a-button
                      >
                    </div>
                    <div style="marginTop:10px" v-else>
                      <a-button
                        @click="cancelCar(item.gbId)"
                        style="width:100px"
                        >移除购物车</a-button
                      >
                    </div>
                  </div>
                </div>
              </div>


//放大屏幕
    Fullscreen(id) {
      var videoElement = document.getElementById(id);
      videoElement.requestFullscreen();
    },