Vue 重寫前端導航

Vue 重寫前端導航

Demo

思路

時隔以前開發的前端導航已有很長一段時間了。爲何改版，一則：平時適用於我的，有不少要吐槽的地方，因爲是純文字，辨識度低。我的是個夜貓子，喜歡暗褐色。歡迎夥計們前來吐槽！

佈局

佈局使用flexbox

導航

經過document.querySelectorAll('h2')，遍歷網頁中H2元素，生成導航。我很懶，謝謝。

function createAndAppendListItems (navList, elementList, makeNavListItem) {
  var pairs = []
  var element
  var li
  for (var i = 0, len = elementList.length; i < len; i++) {
    element = elementList[i]
    li = makeNavListItem(element)
    navList.appendChild(li)
    pairs.push({ element: element, navElement: li })
  }

  return pairs
}

沒有圖片信息的數據顯示

<div v-if="!List.Img" class="paper bg-box" :style="'background-color: #' + color[Math.floor(Math.random() * color.length)]">
   <i>{{List.Name.charAt(0)}}</i>
</div>
<div v-else v-lazy:background-image="List.Img" class="paper bg-box">

編輯頁面

點擊彈窗進行編輯，用了個高斯模糊，實際是對內容進行模糊。
編輯頁面