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

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

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

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

fullScreenContainer.vue

 
 
 
 
  1.   
  • #full-screen-container {
  •   position: fixed;
  •   top: 0px;
  •   left: 0px;
  •   overflow: hidden;
  •   transform-origin: left top;
  •   z-index: 999;
  • }
  • autoResize.js

     
     
     
     
    1. export default {
    2.     data() {
    3.         return {
    4.             dom: '',
    5.             width: 0,
    6.             height: 0,
    7.             debounceInitWHFun: '',
    8.             domObserver: ''
    9.         };
    10.     },
    11.     methods: {
    12.         debounce(delay, callback) {
    13.             let lastTime;
    14.             return function() {
    15.                 clearTimeout(lastTime);
    16.                 const [that, args] = [this, arguments];
    17.                 lastTime = setTimeout(() => {
    18.                     callback.apply(that, args);
    19.                 }, delay);
    20.             };
    21.         },
    22.         observerDomResize(dom, callback) {
    23.             const MutationObserver =
    24.                 window.MutationObserver ||
    25.                 window.WebKitMutationObserver ||
    26.                 window.MozMutationObserver;
    27.             const observer = new MutationObserver(callback);
    28.             observer.observe(dom, {
    29.                 attributes: true,
    30.                 attributeFilter: ['style'],
    31.                 attributeOldValue: true
    32.             });
    33.             return observer;
    34.         },
    35.         async autoResizeMixinInit() {
    36.             const {
    37.                 initWH,
    38.                 getDebounceInitWHFun,
    39.                 bindDomResizeCallback,
    40.                 afterAutoResizeMixinInit
    41.             } = this;
    42.             await initWH(false);
    43.             getDebounceInitWHFun();
    44.             bindDomResizeCallback();
    45.             if (typeof afterAutoResizeMixinInit === 'function')
    46.                 afterAutoResizeMixinInit();
    47.         },
    48.         initWH(resize = true) {
    49.             const { $nextTick, $refs, ref, onResize } = this;
    50.             return new Promise(resolve => {
    51.                 $nextTick(() => {
    52.                     const dom = (this.dom = $refs[ref]);
    53.                     this.width = dom ? dom.clientWidth : 0;
    54.                     this.height = dom ? dom.clientHeight : 0;
    55.                     if (!dom) {
    56.                         console.warn(
    57.                             'DataV: Failed to get dom node, component rendering may be abnormal!'
    58.                         );
    59.                     } else if (!this.width || !this.height) {
    60.                         console.warn(
    61.                             'DataV: Component width or height is 0px, rendering abnormality may occur!'
    62.                         );
    63.                     }
    64.                     if (typeof onResize === 'function' && resize) onResize();
    65.                     resolve();
    66.                 });
    67.             });
    68.         },
    69.         getDebounceInitWHFun() {
    70.             const { initWH } = this;
    71.             this.debounceInitWHFun = this.debounce(100, initWH);
    72.         },
    73.         bindDomResizeCallback() {
    74.             const { dom, debounceInitWHFun } = this;
    75.             this.domObserver = this.observerDomResize(dom, debounceInitWHFun);
    76.             window.addEventListener('resize', debounceInitWHFun);
    77.         },
    78.         unbindDomResizeCallback() {
    79.             let { domObserver, debounceInitWHFun } = this;
    80.             if (!domObserver) return;
    81.             domObserver.disconnect();
    82.             domObserver.takeRecords();
    83.             domObserver = null;
    84.             window.removeEventListener('resize', debounceInitWHFun);
    85.         }
    86.     },
    87.     mounted() {
    88.         const { autoResizeMixinInit } = this;
    89.         autoResizeMixinInit();
    90.     },
    91.     beforeDestroy() {
    92.         const { unbindDomResizeCallback } = this;
    93.         unbindDomResizeCallback();
    94.     }
    95. };

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

     
     
     
     

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

    文章标题:从0到1搭建一款页面自适应组件(Vue.js)
    文章路径:http://www.shufengxianlan.com/qtweb/news30/12480.html

    网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

    广告

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

    猜你还喜欢下面的内容

    自适应网站知识

    分类信息网