vue admin template开启顶部导航

官网上没有太多的说明

废话不多说，直接上代码

1.复制vue element admin必要组件

AppMain.vue覆盖一下

2.修改一些文件

/src/store/index.js

/src/store/getters.js

/src/layout/components/index.js

/src/layout/index.vue

<template><div :class="classObj" class="app-wrapper"><div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside"/><sidebar class="sidebar-container"/><div :class="{hasTagsView:needTagsView}" class="main-container"><div :class="{'fixed-header':fixedHeader}"><navbar/><tags-view v-if="needTagsView"/></div><app-main/></div></div>
</template><script>import {AppMain, Navbar, Sidebar, TagsView} from './components'import ResizeMixin from './mixin/ResizeHandler'export default {name: 'Layout',components: {Navbar,Sidebar,AppMain,TagsView},mixins: [ResizeMixin],computed: {sidebar() {return this.$store.state.app.sidebar},device() {return this.$store.state.app.device},fixedHeader() {return this.$store.state.settings.fixedHeader},needTagsView() {return this.$store.state.settings.tagsView},classObj() {return {hideSidebar: !this.sidebar.opened,openSidebar: this.sidebar.opened,withoutAnimation: this.sidebar.withoutAnimation,mobile: this.device === 'mobile'}}},methods: {handleClickOutside() {this.$store.dispatch('app/closeSideBar', {withoutAnimation: false})}}}
</script><style lang="scss" scoped>@import "~@/styles/mixin.scss";@import "~@/styles/variables.scss";.app-wrapper {@include clearfix;position: relative;height: 100%;width: 100%;&.mobile.openSidebar {position: fixed;top: 0;}}.drawer-bg {background: #000;opacity: 0.3;width: 100%;top: 0;height: 100%;position: absolute;z-index: 999;}.fixed-header {position: fixed;top: 0;right: 0;z-index: 9;width: calc(100% - #{$sideBarWidth});transition: width 0.28s;}.hideSidebar .fixed-header {width: calc(100% - 54px)}.mobile .fixed-header {width: 100%;}
</style>

/src/store/modules/setting.js

/src/setting.js

3结果

4控制台报错

这是因为拷贝的TagsView组件默认开启了权限
/src/layout/components/TagsView/index.js

vue admin template开启顶部导航相关推荐

Vue Admin Template关闭eslint校验，lintOnSave：false设置无效解决办法
目录第一步:lintOnSave:false 第二步:修改package.json中的配置最后一步: 使用Vue Admin Template 二次开发是一件非常愉悦的事情,可是它里面的eslin ...
vue admin template 侧边栏及顶部栏演示字体样式修改
一.侧边栏字体样式修改文件位置修改代码 <script> export default {name: 'MenuItem',functional: true,props: {icon: ...
vue admin template 修改使用后端接口
1. development和production都改下默认url 2.api接口文件我的接口就是 http://xx.com/login import request from '@/uti ...
django 套vue 模板_Vue admin template + Django 快速进行Web开发
本文教大家如何使用Vue admin template和Django快速进行Web开发,旨在帮助我们使用现有的工具.框架及开源UI,让我们在基础较为薄弱的情况下,能进行Web开发.本文不会介绍过多的原 ...
Vue自定义网页顶部导航栏
Vue自定义web网页顶部导航栏说明:此组件是为论坛类项目定制的一个实用的顶部导航栏,当然也可以用于其他的Web项目,只需要稍作修改便可以达到想要的效果.其中导航栏包含了搜索栏,用户头像,以及基本的 ...
vue 移动端顶部导航组件
废话不多说,下面是我自己写的vue移动端顶部导航组件给大家分享一下 ,动态绑定背景颜色,字体颜色,以及回退图标.需要的直接拿去放项目里用吧- 示例图: HTML <template>< ...
VUE写一个顶部导航栏
最近一个实验要做一个中超足球联赛的数据库设计,我打算采用springboot+vue来完成,现在是从零开始学习vue的过程,先试着写一个顶部导航栏.效果如下: 新建一个navbar的组件首先在APP ...
vue实现仿DJI大疆官网顶部导航栏组件
页面进入时,导航栏背景色为透明: 鼠标移入时,导航栏背景变白,鼠标停留的标签字体颜色变换,出现底边框,若有二级下拉菜单,则平滑向下弹出菜单: gitee仓库地址:https://gitee.com/Y ...
vue.js项目实战运用篇之抖音视频APP-第四节：顶部导航栏组件功能
[温馨提示]:若想了解更多关于本次项目实战内容,可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划. [项目地址] 项目采用Git进行管理,最终项目将会发布到GitHub中 ...

vue admin template开启顶部导航

1.复制vue element admin必要组件

2.修改一些文件

3结果

4控制台报错

vue admin template开启顶部导航相关推荐

最新文章

热门文章