一、侧边栏字体样式修改

文件位置

修改代码

<script>
export default {name: 'MenuItem',functional: true,props: {icon: {type: String,default: ''},title: {type: String,default: ''}},render(h, context) {const { icon, title } = context.propsconst vnodes = []if (icon) {vnodes.push(<svg-icon icon-class={icon}/>)}if (title) {vnodes.push(<span class="sidebarSpan" slot='title'>{(title)}</span>)}return vnodes}
}
</script><style scoped>.sidebarSpan{font-size: 17px;font-family: “Arial”,”Microsoft YaHei”,”黑体”,”宋体”,sans-serif;font-weight: bold;}</style>

效果

二、顶部栏字体样式修改

文件位置

修改代码

<template><el-breadcrumb class="app-breadcrumb" separator="/"><transition-group name="breadcrumb"><el-breadcrumb-item v-for="(item,index) in levelList" v-if="item.meta.title" :key="item.path"><span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{ item.meta.title }}</span><a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a></el-breadcrumb-item></transition-group></el-breadcrumb>
</template><script>
import pathToRegexp from 'path-to-regexp'export default {data() {return {levelList: null}},watch: {$route() {this.getBreadcrumb()}},created() {this.getBreadcrumb()},methods: {getBreadcrumb() {let matched = this.$route.matched.filter(item => {if (item.name) {return true}})const first = matched[0]// if (first && first.name !== 'dashboard') {//   matched = [{ path: '/dashboard', meta: { title: '多箱装箱测试系统' }}].concat(matched)// }this.levelList = matched},pathCompile(path) {// To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561const { params } = this.$routevar toPath = pathToRegexp.compile(path)return toPath(params)},handleLink(item) {const { redirect, path } = itemif (redirect) {this.$router.push(redirect)return}this.$router.push(this.pathCompile(path))}}
}
</script><style rel="stylesheet/scss" lang="scss" scoped>.app-breadcrumb.el-breadcrumb {display: inline-block;font-size: 14px;line-height: 50px;margin-left: 10px;.no-redirect {color: #000000;cursor: text;font-size: 17px;font-family: “Arial”,”Microsoft YaHei”,”黑体”,”宋体”,sans-serif;font-weight: bold;}}</style>

效果

vue admin template 侧边栏及顶部栏演示字体样式修改相关推荐

Vue Admin Template关闭eslint校验，lintOnSave：false设置无效解决办法
目录第一步:lintOnSave:false 第二步:修改package.json中的配置最后一步: 使用Vue Admin Template 二次开发是一件非常愉悦的事情,可是它里面的eslin ...
vue导出excel表格，使用xlsx-style自定义字体样式，字体颜色，合并单元格，单元格填充色
一.需要依赖 npm install xlsx-style --save "^0.8.13" npm install xlsx --save "^0.18.5" ...
vue 富文本vue-quill-editor 自定义字号大小和字体样式
一.先创建一个名为font的.css文件,然后引入自定义css // 字体样式大小 .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=&q ...
vue admin template开启顶部导航
官网上没有太多的说明废话不多说,直接上代码 1.复制vue element admin必要组件 AppMain.vue覆盖一下 2.修改一些文件 /src/store/index.js /src/s ...
vue admin template 修改使用后端接口
1. development和production都改下默认url 2.api接口文件我的接口就是 http://xx.com/login import request from '@/uti ...
vue全局修改字体样式(修改成苹方)
惯例:先看最终效果: 1.首先你要先下载你需要的字体(这里以苹方为例) 2.在你的项目 src 文件下创建一个文件夹里面有两个文件, 一个是你需要的字体的文件,一个是 css 样式文件 3.其中 c ...
django 套vue 模板_Vue admin template + Django 快速进行Web开发
本文教大家如何使用Vue admin template和Django快速进行Web开发,旨在帮助我们使用现有的工具.框架及开源UI,让我们在基础较为薄弱的情况下,能进行Web开发.本文不会介绍过多的原 ...
sidebar（侧边栏原理vue admin）
源码位置 sidebar 引用自 layout 组件,layout 组件位于 src/layout/index.vue sidebar 组件源码位于 src/layout/components/Sid ...
vue制作顶部栏组件
**制作顶部标题栏 ** 1.创建Detail标题栏显示页面 <template><div><detail-nav-bar></detail-nav-bar& ...

vue admin template 侧边栏及顶部栏演示字体样式修改

一、侧边栏字体样式修改

文件位置

修改代码

效果

二、顶部栏字体样式修改

文件位置

修改代码

效果

vue admin template 侧边栏及顶部栏演示字体样式修改相关推荐

最新文章

热门文章