Question

我有2个div，每个div都有一个轮播组件，如果您在第一个div点击小轮播图片，我会显示带有大图片的轮播，如果您点击该应用的其余部分，则关闭大轮播，带小图片的轮播返回。一切正常，直到您通过window.go(-1)离开组件，然后再回来，代码不起作用。我试图猜测为什么，但是没有头绪。一旦我转到页面上的其他链接，并且由于某种原因而返回this.body = document.getElementById("app")时，我便会删除事件监听器，即使包括＃2的div在内，整个应用程序仍会使用event.stopPropagation并检查{{ 1}}。
为什么在重新渲染组件之前div被正确替换？我什至删除监听器并在挂载上重新创建新的监听器

ev.target !== this.carouselBig

Answer 1

这只是建议。您需要检查一下，或者如果给jsfiddle这样的东西，我会检查一下。
首先，从数据中删除所有非数据事物。并使用ref。 v-if="images"需要更改为v-show，因为该div中的ref无效。并且我清除了一些内容，您可以将其返回到您的代码中。

<template>
  <div v-show="images">
    <div ref="carouselSmall"
         v-show="!showBigImages"
         class="block"
    >
      <el-carousel type="card" height="100px"></el-carousel>
    </div>
    <div ref="carouselBig"
         v-show="showBigImages"
         class="block"
    >
      <el-carousel type="card" height></el-carousel>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

import common from "./Config";
import { Carousel, CarouselItem } from "element-ui";
Vue.use(Carousel); // you need use them inside all components? So, replace this code to main.js
Vue.use(CarouselItem);

export default {
  props: ["images"],
  data() {
    return {
    };
  },
  computed: {
    showBigImages() {
      return this.$store.state.showBigImages;
    }
  },
  methods: {
    displayBigImages() {
      this.$store.commit("setshowBigImagesM", true);
    },
    hideBigCarousel(destroy) {
      const carouselBig = this.$refs.carouselBig;
      const carouselSmall = this.$refs.carouselSmall;
      const body = document.getElementById("app"); // maybe better use this.$root?

      let stopEvent = (ev) => {
        ev.stopPropagation();
      };

      let onBodyClick = (ev) => {
        // contains check that element inside carouselBig
        if (!carouselBig.contains(ev.target)) {
          this.$store.commit("setshowBigImagesM", false);
        }
      };

      if (destroy) {
        carouselBig.removeEventListener("click", stopEvent, false);
        carouselSmall.removeEventListener("click", stopEvent, false);
        body.removeEventListener("click", onBodyClick, false);
      } else {
        carouselBig.addEventListener("click", stopEvent, false);
        carouselSmall.addEventListener("click", stopEvent, false);
        body.addEventListener("click", onBodyClick, false);
      }
    }
  },
  mounted() {
     this.hideBigCarousel();
  },
  beforeDestroy() {
    this.hideBigCarousel(true);
  }
};
</script>

在Vue JS上显示和隐藏Carousel元素在单击时显示大型Carousel

1 个答案: