Skip to content

broadcast_cloud / web-live

Go to a project
Commit 1cc4c277 by MichaelJier
Options

feature 

1. 组件延迟任务优化
2. 优化直播介绍富文本样式
parent 6a0e7c4c
Showing with 79 additions and 36 deletions
components/modules/menuBox/list.vue
...@@ -6,33 +6,35 @@ ...@@ -6,33 +6,35 @@
<div class="swiper-container" ref="swiper"> <div class="swiper-container" ref="swiper">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
<div class="swiper-slide" v-for="(item, index) in menuList" :key="index"> <div class="swiper-slide" v-for="(item, index) in menuList" :key="index">
<template v-if="item.menuType == 'imagetext'"> <!-- <div v-if="defer(index)"> -->
<image-text :menuInfo="item.menuInfo" :menuId="item.id"></image-text> <template v-if="item.menuType == 'imagetext'">
</template> <image-text :menuInfo="item.menuInfo" :menuId="item.id" v-if="defer(index)"></image-text>
<template v-else-if="item.menuType == 'playlists'"> </template>
<play-lists :listId="item.menuInfo"></play-lists> <template v-else-if="item.menuType == 'playlists'">
</template> <play-lists :listId="item.menuInfo" v-if="defer(index)"></play-lists>
<template v-else-if="item.menuType == 'share'"> </template>
<invite-box></invite-box> <template v-else-if="item.menuType == 'share'">
</template> <invite-box v-if="defer(index)"></invite-box>
<template v-else-if="item.menuType == 'shop'"> </template>
<shop-box :menuId="item.id" :showHot="!caseInfo.status" :showList="true"></shop-box> <template v-else-if="item.menuType == 'shop'">
</template> <shop-box :menuId="item.id" :showHot="!caseInfo.status" :showList="true" v-if="defer(index)"></shop-box>
<template v-else-if="item.menuType == 'coupon'"> </template>
<coupon-box></coupon-box> <template v-else-if="item.menuType == 'coupon'">
</template> <coupon-box v-if="defer(index)"></coupon-box>
<template v-else-if="item.menuType == 'report'"> </template>
<report-box :id="item.menuInfo"></report-box> <template v-else-if="item.menuType == 'report'">
</template> <report-box :id="item.menuInfo" v-if="defer(index)"></report-box>
<template v-else-if="item.menuType == 'chat'"> </template>
<chat-box :isShowChat="isShowChat"></chat-box> <template v-else-if="item.menuType == 'chat'">
</template> <chat-box :isShowChat="isShowChat" v-if="defer(index)"></chat-box>
<template v-else-if="item.menuType == 'iframeLine'"> </template>
<iframe-line :menuInfo="item.menuInfo"></iframe-line> <template v-else-if="item.menuType == 'iframeLine'">
</template> <iframe-line :menuInfo="item.menuInfo" v-if="defer(index)"></iframe-line>
<template v-else> </template>
<empty404></empty404> <template v-else>
</template> <empty404 v-if="defer(index)"></empty404>
</template>
<!-- </div> -->
</div> </div>
</div> </div>
</div> </div>
...@@ -41,6 +43,7 @@ ...@@ -41,6 +43,7 @@
<script> <script>
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import { traffic } from '@/plugins/openTraffic'; import { traffic } from '@/plugins/openTraffic';
import Defer from '@/plugins/Mixin/defer.js';
const imageText = resolve => require(['./menuClass/imageText'], resolve); const imageText = resolve => require(['./menuClass/imageText'], resolve);
const playLists = resolve => require(['./menuClass/playLists/index'], resolve); const playLists = resolve => require(['./menuClass/playLists/index'], resolve);
const inviteBox = resolve => require(['./menuClass/invite'], resolve); const inviteBox = resolve => require(['./menuClass/invite'], resolve);
...@@ -68,10 +71,12 @@ export default { ...@@ -68,10 +71,12 @@ export default {
props: { props: {
value: {} value: {}
}, },
mixins: [Defer()],
data() { data() {
return { return {
swiper: null, swiper: null,
active: this.value active: this.value,
deferMenuList: []
}; };
}, },
computed: { computed: {
......
components/modules/menuBox/menuClass/imageText.vue
...@@ -66,9 +66,15 @@ export default { ...@@ -66,9 +66,15 @@ export default {
.imageText { .imageText {
height: 100%; height: 100%;
overflow: auto; overflow: auto;
padding: 0.1rem;
::v-deep img { ::v-deep img {
max-width: 100%; max-width: 100%;
} }
.ql-editor {
background: rgba(255,255,255,0.1);
border-radius: .1rem;
// color: var(--chatBox-text-color);
}
} }
.ql-container.ql-snow { .ql-container.ql-snow {
border: 0; border: 0;
......
components/modules/menuBox/menuClass/invite/index.vue
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</div> </div>
<div class="invite__list-box"> <div class="invite__list-box">
<div class="invite__list-box__list"> <div class="invite__list-box__list">
<div class="invite__list-box__list--topthree"> <div class="invite__list-box__list--topthree" v-if="threeList.length > 0">
<div v-for="(item, index) in threeList" :key="index" style="display: inline-block;" :class="index === 0 ? 'first-box' : index === 1 ? 'second-box': 'third-box'"> <div v-for="(item, index) in threeList" :key="index" style="display: inline-block;" :class="index === 0 ? 'first-box' : index === 1 ? 'second-box': 'third-box'">
<div class="invite__list-box__list--topthree__item"> <div class="invite__list-box__list--topthree__item">
<div class="invite__list-box__list--topthree__item--head second" v-if="index === 0"> <div class="invite__list-box__list--topthree__item--head second" v-if="index === 0">
......
components/view/mobile.vue
<template> <template>
<div class="page-box view-mobile" @touchmove.stop.prevent @click="_closeAll"> <div class="page-box view-mobile" @touchmove.stop.prevent @click="_closeAll">
<div class="live"> <div class="live">
<div class="top-list-box m-carousel-dvertising"> <div class="top-list-box m-carousel-dvertising" v-if="defer(1)">
<advert-top v-if="isAdTop"></advert-top> <advert-top v-if="isAdTop"></advert-top>
</div> </div>
<div class="player-box"> <div class="player-box" v-if="defer(2)">
<player-box></player-box> <player-box></player-box>
</div> </div>
<div class="camera-box" @touchmove.stop> <div class="camera-box" @touchmove.stop v-if="defer(3)">
<camera-box v-if="isCamera"></camera-box> <camera-box v-if="isCamera"></camera-box>
</div> </div>
<div class="tab-list-box" @touchmove.stop> <div class="tab-list-box" @touchmove.stop v-if="defer(4)">
<menu-tab v-model="menuActive"></menu-tab> <menu-tab v-model="menuActive"></menu-tab>
</div> </div>
<div class="middle-list-box"> <div class="middle-list-box" v-if="defer(5)">
<extend-commodity v-if="spread"></extend-commodity> <extend-commodity v-if="spread"></extend-commodity>
<advert-middle v-else-if="isAdMiddle"></advert-middle> <advert-middle v-else-if="isAdMiddle"></advert-middle>
</div> </div>
<div class="text-box"> <div class="text-box" v-if="defer(6)">
<advert-text v-if="isAdText"></advert-text> <advert-text v-if="isAdText"></advert-text>
</div> </div>
<div class="content-box" @touchmove.stop> <div class="content-box" @touchmove.stop v-if="defer(7)">
<div class="menu-list-box" id="menu-list-box"> <div class="menu-list-box" id="menu-list-box">
<menu-list v-model="menuActive"></menu-list> <menu-list v-model="menuActive"></menu-list>
</div> </div>
...@@ -51,6 +51,8 @@ import playerBox from '@/components/modules/playerBox'; ...@@ -51,6 +51,8 @@ import playerBox from '@/components/modules/playerBox';
import menuTab from '@/components/modules/menuBox/tab'; import menuTab from '@/components/modules/menuBox/tab';
import menuList from '@/components/modules/menuBox/list'; import menuList from '@/components/modules/menuBox/list';
import Defer from '@/plugins/Mixin/defer.js';
export default { export default {
name: 'mobile', name: 'mobile',
head() { head() {
...@@ -72,6 +74,7 @@ export default { ...@@ -72,6 +74,7 @@ export default {
extendAd, extendAd,
extendCommodity extendCommodity
}, },
mixins: [Defer()],
data() { data() {
return { return {
menuActive: 0, menuActive: 0,
......
plugins/Mixin/defer.js 0 → 100644
// 渐进式渲染
export default function(count = 10) {
return {
data() {
return {
displayPriority: 0
}
},
mounted() {
this.runDisplayPriority()
},
methods: {
runDisplayPriority() {
const step = () => {
requestAnimationFrame(() => {
this.displayPriority++
if (this.displayPriority < count) {
step()
}
})
}
step()
},
defer(priority) {
return this.displayPriority >= priority
}
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment