Vue 重寫前端導航

FullStackDeveloper 發(fā)布于2019-08-20 16:54 / 1605人閱讀

摘要：重寫前端導航思路時隔之前開發(fā)的前端導航已有很長一段時間了。為什么改版，一則平時適用于個人，有很多要吐槽的地方，由于是純文字，辨識度低。個人是個夜貓子，喜歡暗褐色。歡迎伙計們前來吐槽布局布局使用導航通過，遍歷網(wǎng)頁中元素，生成導航。

Vue 重寫前端導航

Demo

思路

時隔之前開發(fā)的前端導航已有很長一段時間了。為什么改版，一則：平時適用于個人，有很多要吐槽的地方，由于是純文字，辨識度低。個人是個夜貓子，喜歡暗褐色。歡迎伙計們前來吐槽！

布局

布局使用flexbox

導航

通過document.querySelectorAll("h2")，遍歷網(wǎng)頁中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
}

沒有圖片信息的數(shù)據(jù)顯示


   {{List.Name.charAt(0)}}

編輯頁面

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

云服務器 GPU云服務器重寫規(guī)則重寫路徑重寫 url重寫

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/83244.html

相關(guān)文章

我的這套VuePress主題你熟悉吧

摘要：最近熬了很多個夜晚踩坑無數(shù)終于寫出了用驅(qū)動的主題只需體驗三分鐘，你就會跟我一樣，愛上這款主題已經(jīng)發(fā)布到請客官享用介紹的原主題是的數(shù)高達的有個它在靜態(tài)博客網(wǎng)站中的應用處處可見在這里首先感謝原作者然而它的定位是僅支持等現(xiàn)代瀏覽器。最近熬了很多個夜晚, 踩坑無數(shù), 終于寫出了用VuePress驅(qū)動的主題. 只需體驗三分鐘，你就會跟我一樣，愛上這款主題. vuepress-theme-ind...

Jeffrrey 2019-08-23 15:21 評論0 收藏0
前端導航平臺簡介

摘要：最近，抽了一個周末，把平臺重新重構(gòu)了一遍，優(yōu)化了預覽導航，以及增加簡單的管理，前端開發(fā)導航平臺。前端導航平臺簡介各位小伙伴幫忙 star: 前端導航平臺倉庫前端導航平臺是否有過當你看到比較優(yōu)秀的前端資源時，由于沒有時間來的及收錄，過段時間等需要的時，卻翻來覆去不知道去哪了～～前端導航站，收集前端業(yè)內(nèi)優(yōu)秀技術(shù)博客、框架，方便快速尋找優(yōu)秀資源，～～寶寶再也不用擔心查找資源了～～ ...

lowett 2019-08-20 16:48 評論0 收藏0
Vue2.0 + ElementUI 手寫權(quán)限管理系統(tǒng)后臺模板（一）——簡述

摘要：簡介最近寫了一個基于權(quán)限管理系統(tǒng)的后臺模板，包含了正常項目開發(fā)所需的框架功能，開發(fā)者使用的時候只需要專注于項目的業(yè)務邏輯就好。同時接下來會讓你擁有一個自己完全掌控的框架。簡介最近寫了一個基于vue2.0+element-ui權(quán)限管理系統(tǒng)的后臺模板，包含了正常項目開發(fā)所需的框架功能，開發(fā)者使用的時候只需要專注于項目的業(yè)務邏輯就好。同時接下來會讓你擁有一個自己完全掌控的框架。源碼地址...

_ivan 2019-08-23 14:06 評論0 收藏0
讀?VuePress（四）插件機制的設(shè)計

前言從 9 月份開始，vuepress 源碼進行了重新設(shè)計和拆分。先是開了個 next 分支，后來又合并到 master 分支，為即將發(fā)布的 1.x 版本做準備。最主要的變化是：大部分的全局功能都被拆分成了插件的形式，以可插拔的方式來支撐 vuepress 的運作，這一點很像 webpack。具體架構(gòu)如下： showImg(https://user-gold-cdn.xitu.io/2019...

April 2019-05-22 16:41 評論0 收藏0
【Vue.js 牛刀小試】：第十二章 - 使用 Vue Router 實現(xiàn) Vue 中的前端路由控制

摘要：而路由則是使用了中新增的事件和事件。總結(jié)這一章主要是介紹了如何使用在中構(gòu)建我們的前端路由。系列目錄地址一、基礎(chǔ)知識概覽第一章 - 一些基礎(chǔ)概念（posted at 2018-10-31）第二章 - 常見的指令的使用（posted at 2018-11-01）第三章 - 事件修飾符的使用（posted at 2018-11-02）第四章 - 頁面元素樣式的設(shè)定（posted a...

cpupro 2019-05-22 19:26 評論0 收藏0