从0到1搭建一款页面自适应组件（Vue.js）

 组件将根据屏幕比例及当前浏览器窗口大小，搭建自动进行缩放处理。款页

建议在组件内使用百分比搭配flex进行布局，面自以便于在不同的组件分辨率下得到较为一致的展示效果。香港云服务器 使用前请注意将body的搭建margin设为0，否则会引起计算误差。款页

fullScreenContainer.vue

<template>   <div id="full-screen-container" :ref="ref">     <template v-if="ready">       <slot></slot>     </template>   </div> </template> <script> import autoResize from ./autoResize.js export default {    name: DvFullScreenContainer,面自   mixins: [autoResize],   data () {      return {        ref: full-screen-container,       allWidth: 0,       scale: 0,       datavRoot: ,       ready: false     }   },   methods: {      afterAutoResizeMixinInit () {        const {  initConfig, setAppScale } = this       initConfig()       setAppScale()       this.ready = true     },     initConfig () {        const {  dom } = this       const {  width, height } = screen       this.allWidth = width       dom.style.width = `${ width}px`       dom.style.height = `${ height}px`     },     setAppScale () {        const {  allWidth, dom } = this       const currentWidth = document.body.clientWidth       dom.style.transform = `scale(${ currentWidth / allWidth})`     },     onResize () {        const {  setAppScale } = this       setAppScale()     }   } } </script> <style lang="scss"> #full-screen-container {    position: fixed;   top: 0px;   left: 0px;   overflow: hidden;   transform-origin: left top;   z-index: 999; } </style> 

autoResize.js

export default {      data() {          return {              dom: ,             width: 0,             height: 0,             debounceInitWHFun: ,             domObserver:          };     },     methods: {          debounce(delay, callback) {              let lastTime;             return function() {                  clearTimeout(lastTime);                 const [that, args] = [this, arguments];                 lastTime = setTimeout(() => {                      callback.apply(that, args);                 }, delay);             };         },         observerDomResize(dom, callback) {              const MutationObserver =                 window.MutationObserver ||                 window.WebKitMutationObserver ||                 window.MozMutationObserver;             const observer = new MutationObserver(callback);             observer.observe(dom, {                  attributes: true,                 attributeFilter: [style],                 attributeOldValue: true             });             return observer;         },         async autoResizeMixinInit() {              const {                  initWH,                 getDebounceInitWHFun,                 bindDomResizeCallback,                 afterAutoResizeMixinInit             } = this;             await initWH(false);             getDebounceInitWHFun();             bindDomResizeCallback();             if (typeof afterAutoResizeMixinInit === function)                 afterAutoResizeMixinInit();         },         initWH(resize = true) {              const {  $nextTick, $refs, ref, onResize } = this;             return new Promise(resolve => {                  $nextTick(() => {                      const dom = (this.dom = $refs[ref]);                     this.width = dom ? dom.clientWidth : 0;                     this.height = dom ? dom.clientHeight : 0;                     if (!dom) {                          console.warn(                             DataV: Failed to get dom node, component rendering may be abnormal!                         );                     } else if (!this.width || !this.height) {                          console.warn(                             DataV: Component width or height is 0px, rendering abnormality may occur!                         );                     }                     if (typeof onResize === function && resize) onResize();                     resolve();                 });             });         },         getDebounceInitWHFun() {              const {  initWH } = this;             this.debounceInitWHFun = this.debounce(100, initWH);         },         bindDomResizeCallback() {              const {  dom, debounceInitWHFun } = this;             this.domObserver = this.observerDomResize(dom, debounceInitWHFun);             window.addEventListener(resize, debounceInitWHFun);         },         unbindDomResizeCallback() {              let {  domObserver, debounceInitWHFun } = this;             if (!domObserver) return;             domObserver.disconnect();             domObserver.takeRecords();             domObserver = null;             window.removeEventListener(resize, debounceInitWHFun);         }     },     mounted() {          const {  autoResizeMixinInit } = this;         autoResizeMixinInit();     },     beforeDestroy() {          const {  unbindDomResizeCallback } = this;         unbindDomResizeCallback();     } }; 

这样，一个页面自适应组件就这样搭建完成了，源码下载组件下面，搭建我们将引入组件看一下效果。款页

<template>   <div id="app">     <fullScreenContainer>       <img alt="Vue logo" src="./assets/logo.png" />       <HelloWorld msg="Welcome to Your Vue.js App" />     </fullScreenContainer>   </div> </template> <script> import HelloWorld from "./components/HelloWorld.vue"; import fullScreenContainer from "./components/fullScreenContainer/fullScreenContainer.vue"; export default {    name: "App",面自   components: {      HelloWorld,     fullScreenContainer,   }, }; </script> <style> #app {    font-family: Avenir, Helvetica, Arial, sans-serif;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;   text-align: center;   color: #2c3e50;   margin-top: 60px; } </style> 

 

效果很好，这样对于一些开发自适应页面非常容易。组件

搭建

搭建网站模板

很赞哦!（9174）