在vue2项目中使用loadsh插件配合代码，
app
.vue文件
<template>
<div id="app" ref="app">
<!-- pc端 -->
<div>
<Nav></Nav>
<div style="background-color: #f7f8fa; min-height: calc(100vh - 80px)">
<transition :name="fade" mode="out-in">
<router-v
iew></router-v
iew>
</transition>
</div>
<Bottom></Bottom>
<SiderTool></SiderTool>
<SiderTip></SiderTip>
</div>
<!-- 手机端 -->
<!-- <div v-if="showPage == 1">
<div>
<transition :name="fade" mode="out-in">
<router-v
iew></router-v
iew>
</transition>
</div>
</div> -->
</div>
</template>
<script>
import _ from 'lodash'
// import Top from "@/components/top
.vue";
import Nav from '@/components/nav
.vue'
import Bottom from '@/components/bottom
.vue'
import SiderTool from '
./components/siderTool
.vue'
import SiderTip from '
./components/siderTip
.vue'
export default {
components: {
// Top,
Nav,
Bottom,
SiderTool,
SiderTip
},
async created() {
await this
.$store
.dispatch('setting/getConfigByKey') // 等待异步操作完成
// 如果是移动设备，执行设置根元素字体大小的函数，并添加视口大小改变的监听事件
// if (this
._isMobile()) {
// this
.showPage = 1
// } else {
// this
.showPage = 2
// }
document.getElementById('keywords')
.content =
this
.$store
.state
.xiaqu
.keywords
document.getElementById('description')
.content =
this
.$store
.state
.xiaqu
.description
},
data() {
return {
// 手机端1 pc端2
// showPage: '',
fade: 'fade',
scale: 'scale'
}
},
methods: {
/**
* 检测当前设备是否为移动设备
* @returns {boolean} 如果是移动设备返回 true，否则返回 false
*/
// _isMobile() {
// let flag = navigator
.userAgent
.match(
// /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|
IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
// )
// return flag
// }
},
mounted() {
// 在某个事件或方法中动态修改全局颜色
if (sessionStorage
.getItem('theme')) {
this
.color = sessionStorage
.getItem('theme')
}
this
.$nextTick(() => {
const $app = this
.$refs
.app
const standardScale = 350 / 1920
window
.add
EventListener(
'resize',
_
.debounce(function () {
const docHeight =
document.body
.cl
ientHeight
const docWidth =
document.body
.cl
ientWidth
if (docWidth < 1920) {
const currentScale = docHeight / docWidth
let [scale, translate] = [0, 0]
if (currentScale < standardScale) {
// 以高度计算
scale = docHeight / 350
const shouleWidth = 1920 * scale
const offsetWidth = docWidth - shouleWidth
console
.log('6666')
translate =
offsetWidth > 0 ? `translate(${offsetWidth / 2}px, 0)` : ''
} else {
// 以宽度计算
scale = docWidth / 1920
const shouleHeight = 350 * scale
const offsetHeight = docHeight - shouleHeight
translate =
offsetHeight > 0 ? `translate(0, ${offsetHeight / 2}px)` : ''
}
$app
.style
.cssText = `
transform: scale(${scale});
transform-origin: top left;
width: 1920px;
min-height: 350px;
`
} else {
//适配1920以上的分辨率
let [scale, translate] = [0, 0]
// 以宽度计算
scale = docWidth / 1920
const shouleHeight = 350 * scale
const offsetHeight = docHeight - shouleHeight
translate =
offsetHeight > 0 ? `translate(0, ${offsetHeight / 2}px)` : ''
$app
.style
.cssText = `
transform: scale(${scale});
transform-origin: top left;
width: 1920px;
min-height: 350px;
`
}
}),
300
)
if (
document.create
Event) {
var
event =
document.create
Event('HTML
Events')
event.init
Event('resize', true, true)
window
.dispatch
Event(
event)
} else if (
document.createEventObject) {
window
.fire
Event('onresize')
}
})
},
watch: {
color(v) {
sessionStorage
.setItem('theme', v)
document.documentElement
.style
.setProperty('--global-color', v)
}
}
}
</script>
<style lang="less">
.scale-enter-active,
.scale-leave-active {
transition: all 0
.5s ease;
}
.scale-enter-from,
.scale-leave-to {
opacity: 0;
transform: scale(0
.9);
}
// 淡出淡入
.fade-enter-active,
.fade-leave-active {
transition: opacity 0
.5s ease;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
.colorSelect {
position: fixed;
left: 20px;
top: 200px;
z-index: 50000000000;
}
/* 修改箭头颜色 */
.el-tooltip__popper[x-placement^='bottom'] {
background: var(--global-color) !important;
width: 200px;
}
.el-tooltip__popper[x-placement^='bottom']
.popper__arrow:after {
border-bottom-color: var(--global-color) !important;
}
</style>
1
.其中mounted中1080和1920代表什么？
2
.这样页面正常展示，但是底部和右边都有白边
本文介绍了Internet Explorer浏览器特有的方法createEventObject(), 该方法用于创建一个事件对象, 在IE中进行事件处理。
扫一扫
622
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
