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

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

创新互联服务项目包括宝丰网站建设、宝丰网站制作、宝丰网页制作以及宝丰网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，宝丰网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到宝丰省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

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

fullScreenContainer.vue

#full-screen-container {

position: fixed;

top: 0px;

left: 0px;

overflow: hidden;

transform-origin: left top;

z-index: 999;

}

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();
  
  
  
      }
  
  
  
  };

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

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

文章题目：从0到1搭建一款页面自适应组件（Vue.js）
转载源于：http://www.csdahua.cn/qtweb/news30/12480.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：快上网