From c3aa826406d52957d6f98d0ecd4b77413d5ce908 Mon Sep 17 00:00:00 2001 From: inleft <inleft@qq.com> Date: Mon, 29 Aug 2022 18:23:08 +0800 Subject: [PATCH] 统计模块异步加载 --- src/components/layouts/baseLayout.vue | 44 ++++++++++++++++++++++++++++++-------------- 1 files changed, 30 insertions(+), 14 deletions(-) diff --git a/src/components/layouts/baseLayout.vue b/src/components/layouts/baseLayout.vue index 04cfdc4..bf72da2 100644 --- a/src/components/layouts/baseLayout.vue +++ b/src/components/layouts/baseLayout.vue @@ -6,17 +6,18 @@ </a-layout-header> <keep-alive> - <router-view @showMyVideo="showMyVideo"></router-view> + <router-view @showMyVideo="showMyVideo" @detailBackAction="detailBackAction"></router-view> </keep-alive> <a-layout-footer> <AplayerBox /> <tagFooter /> - <MyVideo ref="MyVideo" /> - <a-button v-if="miniVideoPlayData!=null" class="fadeInRight" - style="position: fixed;right: 0px;bottom: 120px;" @click="showMyVideo(miniVideoPlayData)"> - 视频盒子 - <a-icon type="youtube" /> + <MyVideo ref="MyVideo" @closeMyVideo="closeMyVideo" /> + + <a-button v-if="miniVideoPlayData!=null && showMiniBox" class="fadeInRight" + style="position: fixed;right: 0px;bottom: 130px;" @click="showMyVideo(miniVideoPlayData)"> + {{miniBoxContent}} + <a-icon type="youtube" style="transform: scale(1.5);" /> </a-button> </a-layout-footer> @@ -28,8 +29,11 @@ </template> <script> + // Dplayer Api地址 + // http://dplayer.js.org/ import tagHeader from "../fixed/header.vue" - import tagFooter from "../fixed/footer.vue" + // import tagFooter from "../fixed/footer.vue" + const tagFooter = () => import("../fixed/footer.vue") import AplayerBox from "../mini/Aplayer.vue" import MyVideo from "../group/MyVideo.vue" export default { @@ -42,22 +46,32 @@ data() { return { miniVideoPlayData: null, - showMiniBox: false + firstQuery: true, + showMiniBox: false, + miniBoxContent: "视频盒子", } }, methods: { showMyVideo(param) { this.miniVideoPlayData = param; - console.log("开启mini盒子"); - - this.$refs.MyVideo.showModal(param); - if (!this.showMiniBox) { + }, + detailBackAction(param) { + this.miniVideoPlayData = param; + this.closeMyVideo() + }, + closeMyVideo() { + if (this.firstQuery) { + this.firstQuery = !this.firstQuery; + this.showMiniBox = !this.showMiniBox; this.$notification.info({ - message: '这里是盒子的最小化啦..', + message: '视频盒子最小化啦..', placement: 'bottomRight', }); - this.showMiniBox = true; + + setTimeout(() => { + this.miniBoxContent = ""; + }, 6000); } }, // 下载文件 @@ -139,6 +153,8 @@ -webkit-animation-iteration-count: 1; } + + .fadeInLeft { -webkit-animation-name: "fadeInLeft"; -webkit-animation-duration: 1s; -- Gitblit v1.9.1