Showing
3 changed files
with
26 additions
and
35 deletions
| 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 | }); | ... | ... |
-
Please register or login to post a comment