这里写目录标题
1. 比例缩放
1-1. 方法一: 全局引进
文件 flex.js ---- 代码如下:
((win, doc) => {
const body = document.body
const resizeEvt = 'orientationchange' in win ? 'orientationchange' : 'resize'
const recalc = () => {
const clientWidth = body.clientWidth
const clientHeight = body.clientHeight
const documentWidth = document.documentElement.clientWidth
const documentHeight = document.documentElement.clientHeight
if (!clientWidth) return
body.style.WebkitTransform = `scale(${documentWidth /
clientWidth},${documentHeight / clientHeight})`
}
if (!doc.addEventListener) return
win.addEventListener(resizeEvt, recalc, false)
doc.addEventListener('DOMContentLoaded', recalc, false)
})(window, document)
在 vue.config.js中配置入口文件
configureWebpack: {
entry: {
app: './src/main.js',
'lib-flex': './src/assets/js/flex.js',
},
}
-
- window.innerWidth/Height => 获取浏览器可视区域宽/高度
-
- document.documentElement.clientWidth/Height => 获取浏览器可视区域宽/高
document.documentElement指的是html
- document.documentElement.clientWidth/Height => 获取浏览器可视区域宽/高
-
- document.body.clientWidth/Height => 获取body的宽/高(除去margin)
document.body指的是body元素
- document.body.clientWidth/Height => 获取body的宽/高(除去margin)
①document.documentElement.clientHeight 和 window.innerHeight 是相等的,但是宽度差个滚动条宽度;
②document.documentElement.clientWidth/Height 和 window.innerWIdth/innerHeight 都是获取浏览器可视区域的宽高。其大小随浏览器缩放变化,不因body边距变化;
③document.body.clientWidth/Height 获取的是body实际宽高,不包括滚动条及工具栏宽高,其大小随body元素实际宽高变化而变化。
1-2. 方法二: 局部引进
监听浏览器窗口大的小,同时控制变化的比例
采用了css3的缩放transform: scale(X)属性
封装一个全局组件 – ScreenAdapter
<template>
<div class="ScreenAdapter" :style="style">
<slot />
</div>
</template>
<script>
export default {
name: '',
props: {
width: {
type: String,
default: '1920'
},
height: {
type: String,
default: '1080'
}
},
data() {
return {
style: {
width: this.width + 'px',
height: this.height + 'px',
transform: 'scale(1) translate(-50%, -50%)'
}
}
},
mounted() {
this.setScale()
window.onresize = this.Debounce(this.setScale, 10)
},
methods: {
Debounce: (fn, t) => {
const delay = t || 500
let timer
return function() {
const args = arguments
if (timer) {
clearTimeout(timer)
}
const context = this
timer = setTimeout(() => {
timer = null
fn.apply(context, args)
}, delay)
}
},
// 获取放大缩小比例
getScale() {
const w = window.innerWidth / this.width
const h = window.innerHeight / this.height
console.log('--------getScale-------', [w, h])
// return w < h ? w : h
return [w, h]
},
// 设置比例
setScale() {
this.style.transform = 'scale(' + this.getScale()[0] + ',' + this.getScale()[1] + ') translate(-50%, -50%)'
// this.style.transform = 'scale(' + this.getScale() + ') translate(-50%, -50%)'
console.log('任你千变万化,我都不会影响性能')
}
}
}
</script>
<style lang="scss" scoped>
.ScreenAdapter {
transform-origin: 0 0;
position: absolute;
left: 50%;
top: 50%;
transition: 0.3s;
background: red;
}
</style>
使用组件
<ScreenAdapter> <div>大家好,我是大屏展示页面</div> </ScreenAdapter>
2. 路由自动切换
需求
- 每个路由中的视频自动播放3遍或者5遍,,然后自动切换下一个路由,继续自动播放下一个路由的视频;
- 如果点击tab 导航,,则循环该路由中的视频3遍,然后跳转首页继续循环播放;
实现
app.vue 文件 <router-view @switchRouter="switchRouter"></router-view>
, 这样子路由可以传参并执行父组件的方法!
每个子组件挂载时监听that.$refs.media
的视频播放end状态,播放达到次数则that.$emit('switchRouter',that.$route.name)
export const waitingVideoNum = (that) => {
let num = 0;
let endFlag = false
const ipv6RouterList = ['ipv6-first', 'ipv6-second', 'ipv6-third', 'ipv6-fourth', 'IPv6']
const routerList = ['main', '5GtoB', 'cloudNet']
that.$refs.media.addEventListener("ended", function () {
num++
endFlag = (num === 5 && that.$route.name === 'computer') || (num === 1 && ipv6RouterList.includes(that.$route.name)) || (num === 3 && routerList.includes(that.$route.name))
if (endFlag) {
that.$emit('switchRouter',that.$route.name)
} else {
this.play()
}
},false);
}
APP.vue 文件
<div>
<router-link to="/main" class="main-title" tag="div">
</router-link>
<div
:class="['fiveGtoB-tab-svg', tabActive === '5GtoB' ? 'activeFiveGtoB' : '']"
@click="goto('5GtoB',true)"
></div>
<div
:class="['IP-tab-svg', tabActive === 'IPv6' ? 'activeIP' : '']"
@click="goto('IPv6',true)"
> </div>
<div
:class="['cloudNet-tab-svg', tabActive === 'cloudNet' ? 'activeCloudNet' : '']"
@click="goto('cloudNet',true)"
> </div>
<router-view @switchRouter="switchRouter"></router-view>
</div>
methods: {
goto(activeTab,isClick) {
isClick && this.setIsClick(isClick || false)
this.tabActive = activeTab
this.$router.push({
name: activeTab
});
},
switchRouter (name) {
let routerList = ['main','5GtoB','ipv6-first','ipv6-second','ipv6-third','ipv6-fourth','cloudNet'];
const index = routerList.indexOf(name || '')
if (index !== -1) {
const routerName = this.isClick || !routerList[index + 1] ? routerList[0] : routerList[index + 1]
this.goto(routerName)
if (this.isClick) {
this.setIsClick(false)
}
}
},
setIsClick (isClick) {
this.isClick = isClick;
localStorage.setItem('isClick',JSON.stringify(isClick))
}
}
router.js
import Vue from 'vue';
import Router from 'vue-router';
Vue.use(Router);
export default new Router({
scrollBehavior: () => ({y: 0}),
routes: [
{path: '/main', name: 'main', component: () => import('./views/mainContainer')},
{path: '/5GtoB', name: '5GtoB', component: () => import('./views/5GtoB')},
{path: '/IPv6', name: 'IPv6', component: () => import('./views/IPv6'), redirect:'/IPv6/first',
children: [
{path: 'first', name: 'ipv6-first', component: () => import('./components/ipv6/ipv6First.vue')},
{path: 'second', name: 'ipv6-second', component: () => import('./components/ipv6/ipv6Second.vue')}
]
},
{path: '/cloudNet', name: 'cloudNet', component: () => import('./views/cloudNet')},
{path: '*', redirect: '/main'}
]
})
waitingVideoNum.js
注意: 视频如果太大,会分段加载
export const waitingVideoNum = (that) => {
let num = 0;
let endFlag = false
const ipv6RouterList = ['ipv6-first', 'ipv6-second', 'ipv6-third', 'ipv6-fourth', 'IPv6']
const routerList = ['main', '5GtoB', 'cloudNet']
that.$refs.media.addEventListener("ended", function () {
num++
endFlag = (num === 5 && that.$route.name === 'computer') || (num === 1 && ipv6RouterList.includes(that.$route.name)) || (num === 3 && routerList.includes(that.$route.name))
if (endFlag) {
that.$emit('switchRouter',that.$route.name)
} else {
this.play()
}
},false);
}
5GtoB.vue
在 vue文件里面引用 waitingVideoNum from ‘…/utils/waitingVideoNum.js’
<template>
<div class="main-container">
<video
style="display:block;"
width="100%"
height="100%"
ref="media"
autoplay
muted
webkit-playsinline
x5-playsinline
playsinline
>
<source src="@/assets/video/5g.mp4" type="video/mp4" />
</video>
</div>
</template>
<script>
import { waitingVideoNum } from '../utils/waitingVideoNum.js'
export default {
mounted() {
this.init();
},
methods: {
init() {
waitingVideoNum(this)
},
},
};
</script>
<style lang="scss" scoped>
.main-container {
position: absolute;
top: 0px;
left: 0px;
video { object-fit: cover; }
z-index: 0;
}
</style>