Javascript 在Vue JS上显示和隐藏旋转木马元素单击显示大型旋转木马

我有两个分区，每个分区都有一个旋转木马组件，如果你点击第一个分区上的小旋转木马图像，我会显示带有大图像的旋转木马， 如果你点击应用程序的其余部分，大转盘就会关闭，小图像转盘就会返回。 在您通过

窗口离开组件之前，所有操作都可以正常进行。转到（-1）

然后返回，代码不起作用。我试图猜测原因，但找不到线索。 一旦我转到页面上的其他链接，当我出于某种原因返回时，我会删除事件侦听器

this.body=document.getElementById（“app”）

get整个应用程序，包括我的2个div，即使我使用

event.stopPropagation

并选中

ev.target！==这个.carouselBig

。
为什么在重新订购组件之前，div会被正确替换？我甚至删除了监听器，并在mount上重新创建了新的监听器

从“Vue”导入Vue；
从“Vuex”导入Vuex；
Vue.use（Vuex）；
从“/Config”导入公共文件；
从“元素ui”导入{Carousel，CarouselItem}；
Vue.使用（旋转木马）；
Vue.使用（旋转木马）；
导出默认值{
道具：[“图像”]，
数据（）{
返回{
carouselBig:document.getElementById（“carouselBig”），
carouselSmall:document.getElementById（“carouselSmall”），
正文：document.getElementById（“应用程序”）
};
},
计算：{
showBigImages（）{
返回此。$store.state.showBigImages；
}
},
方法：{
displayBigImages（）{
这是.store.commit（“setshowBigImagesM”，true）；
},
希德比格卡鲁塞尔（毁灭）{
this.carouselBig=document.getElementById（“carouselBig”）；
this.carouselSmall=document.getElementById（“carouselSmall”）；
this.body=document.getElementById（“应用”）；
让stopEvent=ev=>{
ev.stopPropagation（）；
};
让onBodyClick=ev=>{
if（ev.target！==this.carouselBig）{
这是.store.commit（“setshowBigImagesM”，false）；
}
};
如果（销毁）{
this.carouselBig.removeEventListener（“单击”，stopEvent，false）；
this.carouselSmall.removeEventListener（“单击”，stopEvent，false）；
this.body.removeEventListener（“单击”，onBodyClick，false）；
}否则{
this.carouselBig.addEventListener（“单击”，stopEvent，false）；
this.carouselSmall.addEventListener（“单击”，stopEvent，false）；
this.body.addEventListener（“单击”，onbody单击，false）；
}
}
},
安装的（）{
window.onload=（）=>{
this.hideBigCarousel（）；
};
},
在…之前{
这是hideBigCarousel（真）；
}
};

---

这只是一个建议。您需要检查这个，或者如果您给jsfidle类似的东西，我会检查它。
首先，从数据中删除所有不是数据的东西。并使用

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”导入Vue；
从“Vuex”导入Vuex；
Vue.use（Vuex）；
从“/Config”导入公共文件；
从“元素ui”导入{Carousel，CarouselItem}；
Vue.使用（旋转木马）；//您需要在所有组件中使用它们吗？因此，将此代码替换为main.js
Vue.使用（旋转木马）；
导出默认值{
道具：[“图像”]，
数据（）{
返回{
};
},
计算：{
showBigImages（）{
返回此。$store.state.showBigImages；
}
},
方法：{
displayBigImages（）{
这是.store.commit（“setshowBigImagesM”，true）；
},
希德比格卡鲁塞尔（毁灭）{
const carouselBig=此。$refs.carouselBig；
const carouselSmall=此。$refs.carouselSmall；
const body=document.getElementById（“app”）；//也许最好使用它。$root？
让停止事件=（ev）=>{
ev.stopPropagation（）；
};
让车身点击=（ev）=>{
//包含检查carouselBig中的元素
如果（！carouselBig.contains（ev.target））{
这是.store.commit（“setshowBigImagesM”，false）；
}
};
如果（销毁）{
carouselBig.removeEventListener（“单击”，stopEvent，false）；
carouselSmall.removeEventListener（“单击”，停止事件，false）；
removeEventListener（“单击”，onBodyClick，false）；
}否则{
carouselBig.addEventListener（“单击”，停止事件，错误）；
carouselSmall.addEventListener（“单击”，停止事件，false）；
body.addEventListener（“单击”，onbody单击，false）；
}
}
},
安装的（）{
this.hideBigCarousel（）；
},
在…之前{
这是hideBigCarousel（真）；
}
};

从数据中删除所有“旋转木马”内容。您需要使用

ref

非常感谢您的帮助。我已经根据您的评论添加了引用，并将src上载到github如果我最初加载页面，那么carousel工作正常，但是如果您返回，然后单击order，它会突然停止工作

<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>