在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-view></router-view>
</transition>
</div>
<Bottom></Bottom>
<SiderTool></SiderTool>
<SiderTip></SiderTip>
</div>
<!-- 手机端 -->
<!-- <div v-if="showPage == 1">
<div>
<transition :name="fade" mode="out-in">
<router-view></router-view>
</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.addEventListener(
'resize',
_.debounce(function () {
const docHeight = document.body.clientHeight
const docWidth = document.body.clientWidth
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.createEvent) {
var event = document.createEvent('HTMLEvents')
event.initEvent('resize', true, true)
window.dispatchEvent(event)
} else if (document.createEventObject) {
window.fireEvent('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.这样页面正常展示，但是底部和右边都有白边
本文深入解析了C#编程语言与.NET框架的特性与应用，包括核心概念、开发流程、最佳实践及常见问题解决方案。通过实例演示，帮助开发者掌握C#与.NET在实际项目中的高效运用。
扫一扫
675
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
