hookehuyr

优化测试

1 <template> 1 <template>
2 <!-- 页面缓存 --> 2 <!-- 页面缓存 -->
3 - <router-view v-slot="{ Component }"> 3 + <router-view v-slot="{ Component, route }">
4 <keep-alive :include="keepPages"> 4 <keep-alive :include="keepPages">
5 - <component :is="Component" :key="$route.name" /> 5 + <component :is="Component" :key="route.name" />
6 </keep-alive> 6 </keep-alive>
7 </router-view> 7 </router-view>
8 </template> 8 </template>
......
...@@ -75,28 +75,26 @@ export default { ...@@ -75,28 +75,26 @@ export default {
75 created() { 75 created() {
76 }, 76 },
77 mounted() { 77 mounted() {
78 - setTimeout(() => { 78 + var mp = new MuiPlayer({
79 - var mp = new MuiPlayer({ 79 + container: '#mui-player-' + this.item.id,
80 - container: '#mui-player-' + this.item.id, 80 + title: this.item.title,
81 - title: this.item.title, 81 + src: this.item.video,
82 - src: this.item.video, 82 + poster: this.item.cover,
83 - poster: this.item.cover, 83 + autoFit: false,
84 - autoFit: false, 84 + videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放
85 - videoAttribute: [ // 声明启用同层播放, 不让会自动全屏播放 85 + { attrKey: 'webkit-playsinline', attrValue: 'webkit-playsinline' },
86 - { attrKey: 'webkit-playsinline', attrValue: 'webkit-playsinline' }, 86 + { attrKey: 'playsinline', attrValue: 'playsinline' },
87 - { attrKey: 'playsinline', attrValue: 'playsinline' }, 87 + { attrKey: 'x5-video-player-type', attrValue: 'h5-page' },
88 - { attrKey: 'x5-video-player-type', attrValue: 'h5-page' }, 88 + ]
89 - ] 89 + })
90 - }) 90 + this.mp = mp;
91 - this.mp = mp; 91 + this.detail = _.cloneDeep(this.item);
92 - this.detail = _.cloneDeep(this.item); 92 + var video = mp.video();
93 - var video = mp.video(); 93 + // 监听原生video事件
94 - // 监听原生video事件 94 + var _this = this;
95 - var _this = this; 95 + video && video.addEventListener('play', function (event) {
96 - video && video.addEventListener('play', function (event) { 96 + _this.handleAction('play', _this.item.id)
97 - _this.handleAction('play', _this.item.id) 97 + });
98 - });
99 - }, 500);
100 }, 98 },
101 methods: { 99 methods: {
102 goTo () { // 跳转作品详情页 100 goTo () { // 跳转作品详情页
......
...@@ -13,7 +13,7 @@ export const mainStore = defineStore('main', { ...@@ -13,7 +13,7 @@ export const mainStore = defineStore('main', {
13 scrollTopCollection: 0, 13 scrollTopCollection: 0,
14 scrollTopLike: 0, 14 scrollTopLike: 0,
15 scrollTopPerson: 0, 15 scrollTopPerson: 0,
16 - keepPages: 'default', // 很坑爹,空值全部都缓存 16 + keepPages: ['default'], // 很坑爹,空值全部都缓存
17 }; 17 };
18 }, 18 },
19 getters: { 19 getters: {
...@@ -44,20 +44,13 @@ export const mainStore = defineStore('main', { ...@@ -44,20 +44,13 @@ export const mainStore = defineStore('main', {
44 this.scrollTopPerson = v; 44 this.scrollTopPerson = v;
45 }, 45 },
46 changeKeepPages () { // 清空所有缓存,用一个不存在的值覆盖 46 changeKeepPages () { // 清空所有缓存,用一个不存在的值覆盖
47 - this.keepPages = 'default'; 47 + this.keepPages = ['default'];
48 }, 48 },
49 keepThisPage (page) { // 新增缓存页 49 keepThisPage (page) { // 新增缓存页
50 - const arr = this.keepPages.split(","); 50 + this.keepPages.push(page);
51 - arr.push(page);
52 - this.keepPages = arr + "";
53 }, 51 },
54 removeThisPage (page) { // 删除缓存页 52 removeThisPage (page) { // 删除缓存页
55 - const arr = this.keepPages.split(","); 53 + _.remove(this.keepPages, item => item === page)
56 - const index = arr.findIndex(x => x === page);
57 - if (index > 0) {
58 - arr.splice(index, 1);
59 - }
60 - this.keepPages = arr + "";
61 } 54 }
62 }, 55 },
63 }); 56 });
......