最近做前端遇到了不少問題，總結一下，以作備忘，
樣式部分
本前端一共就兩個頁面，以下分別用頁面A，頁面B（在新視窗打開）代替，
頁面A有這樣的想法：1、背景圖要占據整個螢屏，并隨著瀏覽器的縮放而縮放，在頁面中內容較多時出現滾動效果，但是背景圖不要動，2、文本框占據了頁面的主要部分，距離上方距離固定，距離下方距離固定，但是有最小高度限制（不可無限壓縮），
整個背景圖片的css如下
{
position:absolute;
background:url(...) fixed no-repeat;
background-size:cover;
min-height:100%;
min-width:100%;
}
文本框和外層的div關系如下，
height:100%這屬性很邪門，鑫神的《CSS世界》里也說了，對于height屬性，假如父元素的height為auto，只要子元素在檔案流中，其百分比值將被完全忽略，所以在這里我必須給text_area設定一個確定的高度，但是瀏覽器會縮放的，怎么設計高度才能滿足第二個想法呢？
在這里，就用js了（其實后來想想用flex是不是就可以搞定了…），在mounted（）里，監聽resize事件，執行自定義的getResize()函式，并且在mounted()里也執行一次，
getResize(){
let textArea=document.getElementById('text_area');
this.textAreaHeight=document.body.clientHeight-200;
textArea.style.height=this.textAreaHeight.toString()+'px';
}
在這里用到了body的高度，所以在App.vue里要設定
html,body{
height:100%;
}
資料處理部分
然后是從頁面A向頁面B傳遞資料的問題，頁面B在新視窗打開，這帶來了一系列的問題，不過一開始把思路局限為傳遞，確實有問題，
試過的方法有：
1、通過router，但是很可惜，通過params是無法把資料帶到新視窗的，通過query是可以的，但是由于傳遞的字串可能特別長，放在query是不合適的；
2、通過表單提交資料，一開始看了不少關于這方面的博客，但是你們這些老哥貌似都是往一個已存在的頁面上提交資料啊喂！我的頁面B都沒開發出來，提交個P啊！
3、通過vuex存盤，A存盤進去，B拿出來，但試過之后發現不可行，A確實存進去了，但是B再過去拿的時候還是空的，可能是由于vue本來做的就是SPA的原因？
4、麻煩后臺，在頁面A存盤進后臺，后臺回傳id，B根據id再去后臺請求資料，但是后臺為了防止資料無限增長，在請求過后，就會把這個資料洗掉掉，這樣頁面B就沒法重繪了，
最后的解決方案：生成隨機id，存盤進localStorage，在頁面B獲取，在關閉頁面B的時候清除該id對應的內容，但是重繪的時候不要清除，而且在關閉A時不要清除，
這樣就有個問題，怎么判斷這個頁面是在重繪還是關閉？
這篇博客有解答，利用時間差判斷重繪還是關閉，用的方法還是很巧妙的，
其實這樣還是有問題的，就是用戶在打開了B頁面之后，清空了瀏覽器快取，然后重繪了B頁面，這樣就會出bug（等我以后再發現新技術了再來修復…)
在頁面B還抽取了一個小組件，算是加深了對組件化的理解，也感受到了組件化的強大，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/237252.html
標籤：其他