用户登录

page-aside 这个区域里面可以显示应用的边栏,回到项目,先去创建一个边栏组件,放在 src/app/sidebar 这个目录的下面,名字叫 app-sidebar.vue ,在这个文件里定义一个组件 ,名字是 AppSidebar,表示应用的边栏。

打开 layout/components 下面的 page-aside 这个组件,在这个组件里导入刚才创建的 AppSidebar 组件,位置是 @/app/sidebar/app-sidebar 。 在组件的 components 里面,添加一个 AppSidebar 。然后在组件的模板里面,用一下这个 AppSidebar 组件。

在浏览器上预览一下,现在边栏区域的上面会显示 AppSidebar 组件里的内容。 回到继续编辑这个组件。 在组件的这个包装元素上面加上一个类,名字是 app-sidebar。

AppSidebarItemBrand

在边栏组件里面出现的每个边栏项目都可以是一个单独的组件,在这个 sidebar 目录的下面,新建一个组件,放在 components 的下面,名字是 app-sdiebar-item-brand.vue 定义一个组件,名字是 AppSidebarItemBrand,这个组件可以显示应用的标志。

在这个组件的包装元素上,加上两个类,名字是 app-sidebar-item ,每个边栏项目组件的包装元素上都要加上这个类,后面可以再加上一个 brand 。这样我就可以在样式表里专门针对这个边栏项目写一些样式。

在这个组件里要显示应用的标志,先导入标志组件,名字是 AppLogo 位置是 @/app/components/app-logo 。然后在组件的 components 里面要添加一个 AppLogo。这样就可以在组件的模板里使用这个组件了,用一下 AppLogo 。

点击这个应用标志可以打开应用的首页,这里用一组 router-link 组件,用它包装一下这个 AppLogo 组件。 给 router-link 添加一个 to 属性,值设置成 / ,表示应用的根。

使用

打开 app-sidebar 组件,在组件里导入 AppSidebarItemBrand ,位置是当前目录 components 下面的 app-sidebar-item-brand 。在组件的 components 里面,添加一个 AppSidebarItemBrand。 然后在组件的模板里,用一下这个 AppSidebarItemBrand 。 回到浏览器预览一下,现在应用的边栏这个区域的上面会显示应用的标志。

检查一下这个标志元素,观察一下。先是一个 app-sidebar,这是 app-sidebar 组件的包装元素,里面是 app-sidebar-item 加 brand ,这个元素是 app-sidebar-item-brand 组件的包装元素,它里面是一个链接,然后是应用的标志组件里的内容。

AppSidebarItemPopular

下面再去创建两个边栏项目组件,放在 sidebar/components 的下面,名字是 app-sidebar-item-popular.vue 。 在文件里定义一个组件,名字是 AppSidebarItemPopular。这个组件里需要用一个小图标,所以先导入应用里的 AppIcon 组件,位置是 @/app/components/app-icon

在组件的 components 里面,添加一个 AppIcon。 然后处理一下组件的模板,在这个包装元素上加上两个类,一个是 app-sidebar-item 还有一个 popular 。

这个元素里包装的东西是一个小图标, 用一下 AppIcon ,用 name 设置一下需要的图标,这里我们要用的是 local_fire_department 。

使用

打开 app-sidebar,在这个组件里导入刚才创建的 AppSidebarItemPopular, 位置是当前目录 components 下面的 app-sidebar-item-popular。在组件的 components 里面,添加一个 AppSidebarItemPopular 。然后在组件的模板里,用一下这个组件,AppSidebarItemPopular。

在浏览器上预览一下,现在边栏上会出现一个小图标,它就是 AppSidebarItemPopular 这个组件里的内容。

AppSidebarItemAdd

回到项目再创建一个边栏项目组件,复制一份 AppSidebarItemPopular,修改一下名字,app-sidebar-item-add.vue。 打开这个组件文件,改一下名字,AppSidebarItemAdd。 包装元素上加上一个 add 类,去掉这个 popular。 要显示的小图标是 add_a_photo 。

使用

再打开 app-sidebar,导入一个组件,位置是当前目录 components 下面的 app-sidebar-item-add ,名字是 AppSidebarItemAdd。

然后在组件的 components 里面,添加一个 AppSidebarItemAdd 组件。 在组件的模板里再用一下这个组件,AppSidebarItemAdd。

回到浏览器,预览一下,现在边栏上面会有一个添加图片的小图标,它就是 AppSidebarItemAdd 这个组件要显示的东西。

定义应用边栏组件(AppSidebar)《 Vue.js 项目实践:应用布局 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点