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

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();
    },
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

知知洋洋

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值