src/components/group/platformGroup.vue

@@ -1,51 +1,70 @@
<template>
   <div>
      <button type="button" class="button" @click="previewURL">URL Array</button>
      <button type="button" class="button" @click="previewImgObject">Img-Object Array</button>
   </div>
	
   <a-tabs :defaultActiveKey="activeKey" @change="changeKey"
      :tabBarStyle="{'display': 'flex','justify-content': 'center'}">
      <a-tab-pane :key="keyType.type_1" tab="片刻">
         <videoList v-on="$listeners" :activeKey="activeKey"></videoList>
      </a-tab-pane>
      <a-tab-pane :key="keyType.type_2" tab="流影">
         <videoList v-on="$listeners" :activeKey="activeKey"></videoList>
      </a-tab-pane>
      <a-tab-pane :key="keyType.type_3" tab="谱库">
         <photoShow :activeKey="activeKey"></photoShow>
      </a-tab-pane>
   </a-tabs>

</template>

<script>
   import 'viewerjs/dist/viewer.css'
   import {
      api as viewerApi
   } from "v-viewer"
   import videoList from "../mini/box14-video.vue"
   import photoShow from "../mini/box18-photoShow.vue"
   import myConstant from "../../config/myConstant.js"

   export default {
      data() {
         return {
            sourceImageURLs: [
               'https://picsum.photos/200/200?random=1',
               'https://picsum.photos/200/200?random=2',
            ],
            sourceImageObjects: [{
                  'src': 'https://picsum.photos/200/200?random=3',
                  'data-source': 'https://picsum.photos/800/800?random=3'
               },
               {
                  'src': 'https://picsum.photos/200/200?random=4',
                  'data-source': 'https://picsum.photos/800/800?random=4'
               }
            ]
         }
      components: {
         videoList,
         photoShow,
      },
      created() {
         this.getActiveKey()
      },
      watch: {
         '$route'(to, from) {
            if ("platform" === to.name) {
               this.getActiveKey()
            }
         },
      },
      methods: {
         previewURL() {
            // 如果使用`app.use`进行全局安装, 你就可以像这样直接调用`this.$viewerApi`
            const $viewer = this.$viewerApi({
               images: this.sourceImageURLs
            })
         getActiveKey() {
            if (this.$route.query.activeKey != "" && this.$route.query.activeKey != undefined) {
               this.activeKey = this.$route.query.activeKey;
            } else {
               //随机三选一
               var random = Math.floor(Math.random() * 10);
               this.activeKey = random >= 8 ?
                  this.keyType.type_3 : (random <= 3 ? this.keyType.type_2 : this.keyType.type_1)
						
               this.$router.replace({query:{activeKey:this.activeKey}})
            }
         },
         previewImgObject() {
            // 或者你可以单独引入api然后执行它
            const $viewer = viewerApi({
               options: {
                  inline:true,
                  toolbar: true,
                  url: 'data-source',
                  initialViewIndex: 1
               },
               images: this.sourceImageObjects
            })
         changeKey(key) {
            this.activeKey = key
            this.$router.replace({query:{activeKey:this.activeKey}})
         }
      }
      },
      data() {
         return {
            activeKey: "moment",
            keyType: myConstant.activeKeyType
         }
      },

   }
</script>

<style lang="less">
   .ant-tabs-tab {
      user-select: none;
   }
</style>