vite+vue+ts+element-plus从零开发管理后台框架(12)-logo和标题

mirahs 的个人博客 / 6 / 0 / 创建于 1个月前 / 更新于 1个月前

编辑src/views/Main.vue，template段header-left修改如下。logo和标题全部在router-link标签下，即点击的时候会跳转到/这个路由，展开状态下显示logo和标题，折叠状态下只显示logo。

<div class="header-left" :style="{ width: menuStore.width }">
    <router-link to="/">
        <div class="logo">VE</div>
        <div v-if="!menuStore.collapse" class="title"><span>Vue Element</span></div>
    </router-link>
</div>

style段header-left修改如下，这里要注意route-link渲染之后就是a标签。

.header-left {
    & a {
        height: 60px;
        color: inherit;
        text-decoration: none;

        display: flex;
        align-items: center;

        .logo {
            margin-left: 14px;
            width: 36px;
            height: 36px;
            background-color: var(--el-color-primary);
            border-radius: 4px;

            display: flex;
            justify-content: center;
            align-items: center;

            color: white;
        }

        .title {
            margin-left: 14px;
            font-weight: 700;

            & span {
                color: var(--el-color-primary);
            }
        }
    }
}

效果

菜单展开

菜单展开

菜单折叠

菜单折叠

本作品采用《CC 协议》，转载必须注明作者和本文链接

276 声望

暂无个人描述~

推荐文章：

更多推荐...

vite2-electron-vadmin 一款清爽UI中后台权限管理系统|Electron-Vue3后台 12 / 3 |

基于 Vue2.0 开发的 Lumen IM 在线聊天应用 33 / 15 |

electron+vue 仿微信客户端聊天|electron 仿微信界面|electron 聊天实例 10 / 5 |

在 vue-cli 3.0 + 里面对 axios 封装 18 / 3 |

教程：使用 Vue.js 和 Laravel 共建一个简单的 CRUD 应用 49 / 13 |

讨论数量: 0

(=￣ω￣=)··· 暂无内容！

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

未填写

私信

文章归档

15 篇 2025 年 3 月 8 篇 2025 年 2 月 18 篇 2024 年 7 月 14 篇 2024 年 6 月 43 篇 2024 年 5 月 2 篇 2024 年 4 月 9 篇 2023 年 11 月

1周前 vite+vue+ts+element-plus从零开发管理后台框架(22)-路由组件缓存 3周前 vite+vue+ts+element-plus从零开发管理后台框架(21)-多页签点击切换 3周前 vite+vue+ts+element-plus从零开发管理后台框架(20)-多页签移除和跳转 3周前 vite+vue+ts+element-plus从零开发管理后台框架(19)-多页签 3周前 vite+vue+ts+element-plus从零开发管理后台框架(18)-主颜色优化

5 现在写从零组装一个简单的web框架系列文档会有人看吗？ 4 使用Composer从零开发一个简单的web框架(01)-项目初始化 2 使用Composer从零开发一个简单的restful框架(01)-项目初始化 2 vite+vue+ts+element-plus从零开发管理后台框架(01)-初始化 2 vite+vue+ts+element-plus从零开发管理后台框架(00)-说明

成为赞助商