网站关键词写在哪里,专做品牌网站,蒙古文网站建设汇报材料,清水河网站建设参考了其他博主的代码#xff0c;但发现会有滚动条#xff0c;并且居中的位置不太对#xff0c;所以改了一下css#xff0c;修复了这些问题#xff0c;直接上代码
template
div classScaleBoxAdivclassScaleBoxrefSca…参考了其他博主的代码但发现会有滚动条并且居中的位置不太对所以改了一下css修复了这些问题直接上代码
template
div classScaleBoxAdivclassScaleBoxrefScaleBox:style{width: width px,height: height px,}!-- 内容 --/div
/div
/template
script
export default {name: index,data() {return {scale: 0,width: 1920,height: 1080,}}, methods: {getScale() {const { width, height } thisconst wh window.innerHeight / heightconst ww window.innerWidth / widthreturn ww wh ? ww : wh},setScale() {this.scale this.getScale()if (this.$refs.ScaleBox) {this.$refs.ScaleBox.style.setProperty(--scale, this.scale)}},debounce(fn, delay) {const delays delay || 500let timerreturn function () {const th thisconst args argumentsif (timer) {clearTimeout(timer)}timer setTimeout(function () {timer nullfn.apply(th, args)}, delays)}},},mounted() {this.setScale()window.addEventListener(resize, this.debounce(this.setScale))},
}
style langscss scoped
#ScaleBox {--scale: 1;
}
.ScaleBoxA {top: 0;width: 100vw;height: 100vh;position: fixed;display: flex;align-items: center;justify-content: center;
}
.ScaleBox {transform: scale(var(--scale));display: flex;flex-direction: column;transform-origin: 960px 540px;transition: 0.3s;z-index: 999;
}
/style
