Vue 重写前端导航

FullStackDeveloper 发布于2019-08-20 16:54 / 1514人阅读

摘要：重写前端导航思路时隔之前开发的前端导航已有很长一段时间了。为什么改版，一则平时适用于个人，有很多要吐槽的地方，由于是纯文字，辨识度低。个人是个夜猫子，喜欢暗褐色。欢迎伙计们前来吐槽布局布局使用导航通过，遍历网页中元素，生成导航。

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
}

没有图片信息的数据显示


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

编辑页面

点击弹窗进行编辑，用了个高斯模糊，实际是对内容进行模糊。
编辑页面

云服务器 GPU云服务器重写规则重写路径重写 url重写

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/83244.html

我的这套VuePress主题你熟悉吧

摘要：最近熬了很多个夜晚踩坑无数终于写出了用驱动的主题只需体验三分钟，你就会跟我一样，爱上这款主题已经发布到请客官享用介绍的原主题是的数高达的有个它在静态博客网站中的应用处处可见在这里首先感谢原作者然而它的定位是仅支持等现代浏览器。最近熬了很多个夜晚, 踩坑无数, 终于写出了用VuePress驱动的主题. 只需体验三分钟，你就会跟我一样，爱上这款主题. vuepress-theme-ind...

Jeffrrey 2019-08-23 15:21 评论0 收藏0
前端导航平台简介

摘要：最近，抽了一个周末，把平台重新重构了一遍，优化了预览导航，以及增加简单的管理，前端开发导航平台。前端导航平台简介各位小伙伴帮忙 star: 前端导航平台仓库前端导航平台是否有过当你看到比较优秀的前端资源时，由于没有时间来的及收录，过段时间等需要的时，却翻来覆去不知道去哪了～～前端导航站，收集前端业内优秀技术博客、框架，方便快速寻找优秀资源，～～宝宝再也不用担心查找资源了～～ ...

lowett 2019-08-20 16:48 评论0 收藏0
Vue2.0 + ElementUI 手写权限管理系统后台模板（一）——简述

摘要：简介最近写了一个基于权限管理系统的后台模板，包含了正常项目开发所需的框架功能，开发者使用的时候只需要专注于项目的业务逻辑就好。同时接下来会让你拥有一个自己完全掌控的框架。简介最近写了一个基于vue2.0+element-ui权限管理系统的后台模板，包含了正常项目开发所需的框架功能，开发者使用的时候只需要专注于项目的业务逻辑就好。同时接下来会让你拥有一个自己完全掌控的框架。源码地址...

_ivan 2019-08-23 14:06 评论0 收藏0
读 VuePress（四）插件机制的设计

前言从 9 月份开始，vuepress 源码进行了重新设计和拆分。先是开了个 next 分支，后来又合并到 master 分支，为即将发布的 1.x 版本做准备。最主要的变化是：大部分的全局功能都被拆分成了插件的形式，以可插拔的方式来支撑 vuepress 的运作，这一点很像 webpack。具体架构如下： showImg(https://user-gold-cdn.xitu.io/2019...

April 2019-05-22 16:41 评论0 收藏0
【Vue.js 牛刀小试】：第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

摘要：而路由则是使用了中新增的事件和事件。总结这一章主要是介绍了如何使用在中构建我们的前端路由。系列目录地址一、基础知识概览第一章 - 一些基础概念（posted at 2018-10-31）第二章 - 常见的指令的使用（posted at 2018-11-01）第三章 - 事件修饰符的使用（posted at 2018-11-02）第四章 - 页面元素样式的设定（posted a...

cpupro 2019-05-22 19:26 评论0 收藏0