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

Source: Internet
Author: User

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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.