日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
從0到1搭建一款頁面自適應(yīng)組件（Vue.js）

 組件將根據(jù)屏幕比例及當(dāng)前瀏覽器窗口大小，自動(dòng)進(jìn)行縮放處理。

創(chuàng)新互聯(lián)服務(wù)項(xiàng)目包括寶豐網(wǎng)站建設(shè)、寶豐網(wǎng)站制作、寶豐網(wǎng)頁制作以及寶豐網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，寶豐網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到寶豐省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

  • 建議在組件內(nèi)使用百分比搭配flex進(jìn)行布局，以便于在不同的分辨率下得到較為一致的展示效果。
  • 使用前請(qǐng)注意將body的margin設(shè)為0，否則會(huì)引起計(jì)算誤差。

fullScreenContainer.vue

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

  • autoResize.js

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

    這樣，一個(gè)頁面自適應(yīng)組件就這樣搭建完成了，下面，我們將引入組件看一下效果。

     
 
 
 
      
  
  
  
  
      2. 
  
  
  
  
    2. 
  
  
  
  
    3. 
  
  
  
  
    4. 
  
  
  
  
      6.

    效果很好，這樣對(duì)于一些開發(fā)自適應(yīng)頁面非常容易。


    新聞名稱：從0到1搭建一款頁面自適應(yīng)組件（Vue.js）
    新聞來源：http://www.dlmjj.cn/article/djhjshs.html