VueJs uses Amaze ui to adjust the list and content page, vuejsamaze

VueJs uses Amaze ui to adjust the list and content page, vuejsamaze

Create left menu

The general style of a background management system is divided into the north and south, while the West (that is, the left) is generally our menu.

Today, we will complete our project to the style shown in figure. First, we will create a menu on the left and create menu. vue under/src/components. The Code is as follows:

<Template> <div class = "admin-sidebar am-offcanvas" id = "admin-offcanvas"> <div class = "am-offcanvas-bar admin-offcanvas-bar"> <ul class = "am-list admin-sidebar-list"> <li class = "admin-parent" v-for = "menu in menus"> <router-link: to = "menu. href "> {menu. name }}</router-link> <ul class = "am-list am-collapse admin-sidebar-sub am-in" id = "collapse-nav"> <li v -for = "child in menu. childs "v-if =" menu. childs "> <router-link: to =" child. href "> <span class =" am-icon-check "> </span> {child. name }}< span class = "am-icon-star am-fr am-margin-right admin-icon-yellow"> </span> </router-link> </ li> </ul> </div> </template> <script> export default {name: "Menu", data () {return {menus: [{name: "Homepage", href: "/", childs: []}, {name: "", href: "/", childs: []}, {name: "Inbox", href: "/Inbox", childs: []}, {name: "poster ", href: "/Outbox", childs: []}, {name: "bin", href: "/", childs: []}, {name: "Draft box ", href: "/", childs: []}, {name: "Other Folders", href: "/", childs: [{name: "sent Email", href: "/" },{ name: "Deleted email", href: "/"}] }}</script>

Now our menu is ready. You only need to apply the menu to our project. Open/src/App. vue and modify the following location:

Adjust list page

The code for opening/src/pages/Index. vue is as follows:

<Template> <div class = "admin-content"> <div class = "admin-content-body"> <div class = "am-cf am-padding- bottom-0 "> <div class =" am-fl am-cf "> <strong class =" am-text-primary am-text-lg "> inbox </strong> /<small> Inbox </small> </div> 
Note: We initialized the data on the first page and specified that 10 entries are displayed on each page. We did not develop the paging function. The reason is that the cnodejs.org api does not return paging information for us. In the future, if it is actually developed, the interface will normally return paging information, and we will then perform specific rendering.
Adjust Content Page
Open/src/pages/Content. vue with the following code:
<Template> <div class = "admin-content"> 

So far, we have integrated the list page and content page. It indicates that in the adjusted script, a mounted method is added. This is the UDF of vuejs, what I understand is that the element has been created and the data has been rendered. We can set the height of admin-content, but I am not sure whether there is a problem with my writing or the effect of integrating Amaze ui and vuejs. Currently, this can only be solved.
Final Effect
List page:

Content Page:

Summary
The above section describes how to adjust the list and content pages of VueJs using Amaze ui. I hope it will be helpful to you. If you have any questions, please leave a message for me, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!