GitHub

https://github.com/PanJiaChen/vue-element-admin

DEMO

?https://panjiachen.github.io/vue-element-admin/

源代碼?

<template><div class="sidebar-logo-container" :class="{'collapse':collapse}"><transition name="sidebarLogoFade"><router-link v-if="collapse" key="collapse" class="sidebar-logo-link" to="/"><img v-if="logo" :src="logo" class="sidebar-logo"><h1 v-else class="sidebar-title">{{ title }} </h1></router-link><router-link v-else key="expand" class="sidebar-logo-link" to="/"><img v-if="logo" :src="logo" class="sidebar-logo"><h1 class="sidebar-title">{{ title }} </h1></router-link></transition></div> </template><script> export default {name: 'SidebarLogo',props: {collapse: {type: Boolean,required: true}},data() {return {title: 'Vue Element Admin',logo: 'https://wpimg.wallstcn.com/69a1c46c-eb1c-4b46-8bd4-e9e686ef5251.png'}} } </script><style lang="scss" scoped> .sidebarLogoFade-enter-active {transition: opacity 1.5s; }.sidebarLogoFade-enter, .sidebarLogoFade-leave-to {opacity: 0; }.sidebar-logo-container {position: relative;width: 100%;height: 50px;line-height: 50px;text-align: center;overflow: hidden;& .sidebar-logo-link {height: 100%;width: 100%;& .sidebar-logo {width: 32px;height: 32px;vertical-align: middle;margin-right: 12px;}& .sidebar-title {display: inline-block;margin: 0;color: #2b2f3a;font-weight: 600;line-height: 50px;font-size: 14px;font-family: Avenir, Helvetica Neue, Arial, Helvetica, sans-serif;vertical-align: middle;}}&.collapse {.sidebar-logo {margin-right: 0px;}} } </style>

參考文章

總結

以上是生活随笔為你收集整理的Vue + Element UI——侧边栏LOGO设计DEMO的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。