Vue 重寫前端導(dǎo)航

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

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

Vue 重寫前端導(dǎo)航

Demo

思路

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

布局

布局使用flexbox

導(dǎo)航

通過(guò)document.querySelectorAll("h2")，遍歷網(wǎng)頁(yè)中H2元素，生成導(dǎo)航。我很懶，謝謝。

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
}

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


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

編輯頁(yè)面

點(diǎn)擊彈窗進(jìn)行編輯，用了個(gè)高斯模糊，實(shí)際是對(duì)內(nèi)容進(jìn)行模糊。
編輯頁(yè)面

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/83244.html

相關(guān)文章

我的這套VuePress主題你熟悉吧

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

Jeffrrey 2019-08-23 15:21 評(píng)論0 收藏0
前端導(dǎo)航平臺(tái)簡(jiǎn)介

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

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

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

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

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

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

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

cpupro 2019-05-22 19:26 評(píng)論0 收藏0