輔助網格包含一組具有多個交叉點的水平和垂直虛線，它固定在畫布的後方不受其他對象的影響，可以為您提供視覺輔助幫您實現圖形的精確定位和準確地對齊對象。如果你正在開發一款在線設計之類的應用（如“藍湖”），提供輔助網格功能會讓設計者工作起來更加高效。
網格的實現原理
在WEB上實現網格功能其實很簡單，首先我們需要知道要繪製區域的頁面大小，接著就是我們要提供網格的大小。通過網格的大小我們可以計算出當前繪製頁面需要多少根橫線和豎線，再在頁面上繪製出對應的線條即可了。
定義網格元素
這裡我通過div來繪製對應的橫線和豎線，線條的個數根據需要繪製的頁面大小和網格大小來計算，通過定義每個div的頂部距離來是實現網絡的排列。
定義網格樣式
這裡我繪製了一個瀏覽器可視區域的網格，所以用到了fixed屬性值，用來生成絕對定位的元素（相對於瀏覽器窗口進行定位）。在需要繪製網格的區域設置屬性position：relative，線條元素設置屬性position：absolute，然後通過left和top來定位線條顯示位置。因為只有定義了position：relative或absolute屬性的元素才有left和top屬性，元素內聯樣式中設置了left才能通過el.style.left獲取或設置相對於具有定位屬性(position定義為relative)的父對象的左邊距（top屬性同理），所以這裡我們需要為元素設定position屬性。
功能邏輯實現
從調用組件的父級組件獲取網格大小（可以隨時調整）和繪製區域大小（這個一般都是固定的），去除四邊的虛線2個像素的佔位，然後除以網格大小得到需要的顯示的線條數。由於這的寬度可能不是整數，因此計算出的值通過Math.ceil()方法向上取整。同時監聽網格大小，當切換網格大小時重新計算一次線條數量（這裡的deep: true 可以深度檢測到gridSize對象的屬性值的變化）。
網格組件調用
組件調用相當的簡單，引入對應的組件然後在components中註冊該組件即可使用。組件中需要傳遞兩個對象gridSize和pageSize，這裡我先定義了一個固定網格值。大家也可以定義多種網格樣式，然後給用戶在線選擇切換。
總結：
以上內容是小編給大家分享的Vue實戰068：輔助網格功能的實現，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回覆大家的。更多Vue實戰技巧可以參考專欄：Vue實戰系列，在此也非常感謝大家對小編的支持！
閱讀更多 編程手札 的文章
