Summary of vue_shop case study knowledge points (the second day)

- The first time I wrote this kind of summary, it was rather complicated and not logical, I just tried to write

The first time I wrote this kind of summary, it was rather complicated and not logical, I just tried to write

Realization function: change the color of selected text

active-text-color: Indicates the color of the selected text

After effect

Insert picture description here

Realization function: add different icons to the circular list

Font icons cycle through the list in order

First define a font object

iconObj:{
    
    

 // 用键和值形式让其一一对应
 // id: 字体图标
 '102':'iconfont icon-user'
 }

Insert picture description here

After effect
Insert picture description here

Realization function: Keep a sub-menu expanded

After finding the following attributes, find out who the attribute belongs to and find out that it belongs to Menu Attribute
unique-opened
. Find the attribute in your file and add it.
Insert picture description here

Found the problem: There is a raised part

Insert picture description here
After inspection, it was found that there is a pixel border

Just remove the right border line

.el-menu{
    
    
	border-right:none;
}

final effect
Insert picture description here

Realization function: folding and unfolding of the list

Add a button, add @click to it and
Insert picture description here

use toggleCollapse function to control its boolean value

Because the animation effect is too slow, just cancel the collapse animation and
Insert picture description here
set collapse-transition = false.

Found the problem: the background color did not follow the folding and unfolding

Insert picture description here
It is found that the value of the sidebar has been

hard-coded. Change it to follow isCollapse. Whether it is true or not, it can automatically change the width.

After effect
Insert picture description here

Found a problem: Automatically jump to the home page instead of the welcome page after each login

Use welcome as a sub-route of /home and redirect it from /home to /welcome automatically
Insert picture description here

Realize the function to jump to different links through the secondary menu

First, turn on the routing mode for the sidebar, turn the router to true, and
Insert picture description here
use path as the route's jump address.

Click on the user list to display on the right

Insert picture description here
First write the basic content in User.vue,

then import the file in the router and add a routing address to

achieve the effect:

A minor problem was found: the secondary menu was not highlighted after opening the user list page

Insert picture description here

After effect

Insert picture description here

Found the problem: the default-active at this time cannot be written to death

Get the address value of the secondary menu that is clicked each time, and save its activation status. Save
Insert picture description here
the activation status of the link

Insert picture description here
Set it as dynamic assignment

. Take out the value you just got and activate it.

Implement breadcrumb navigation area

Find the style you want, copy the code, and make certain modifications according to your wishes

Insert picture description here
Import on-demand in element.js

The effect is displayed at this time:

Realize the card view area

Insert picture description here

Write some basic layouts for card views and breadcrumbs

Search and add area

Insert picture description here
Use the basic layout to

achieve the effect to

achieve the effect

Obtain the data of the user list

Add the index column