nd_h5/src/App.vue

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" /> -->
    <keep-alive>
      <router-view :key="$route.fullPath"></router-view>
    </keep-alive>
    <Loading></Loading>
  </div>
</template>

<script>
import Loading from '@/components/loading.vue';
import EventBus from '@/utils/eventBus.js';
export default {
  name: 'App',
  components: {
    Loading,
  },
  created(){
    EventBus.$on('preview', this.handlePreview);
    EventBus.$on('playVideo', this.handleVideoPlay);
  },
  methods: {
    handleVideoPlay(e){
      document.querySelectorAll('video').forEach(video => {
        if(e.target !== video && !video.paused) video.pause();
      })
    },
    handlePreview(url){
      const { data } = this.$store.state.pages;
      const { id = 'main' } = this.$route.params;
      const page = data.pages[id];
      if(!page) return;
      let images = this.findPreviewImage(page);
      this.$previewImage({
        urls: images,
        startPosition: images.indexOf(url),
        onClose () {
          console.log('关闭事件回调')
        }
      })
    },
    findPreviewImage(data, arr = []){
      if(Array.isArray(data)) {
        data.forEach(_data => {
          this.findPreviewImage(_data, arr);
        })
        return;
      }
      const { image, preview, children, nodes } = data;
      if(image && preview) arr.push(image);
      if(children) this.findPreviewImage(children, arr);
      if(nodes) this.findPreviewImage(nodes, arr);
      return arr;
    }
  },
}
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
.image-preview__swiper-container {
  z-index: 100000;
}
</style>