No.23 Vue element admin learn to use (XVIII) splitpane and upload avatars

This is my participation 8 The fourth of the yuegengwen challenge 23 God , Check out the activity details ：8 Yuegengwen challenge

SplitPane

Functionally, it is a split pane , You can drag at will , I haven't done relevant functions before , To learn

vue The file in @/views/components-demo/split-pane.vue, The library used is vue-splitpane

The method of use also seems relatively simple , Let's introduce it first , Define a resize Method

Look write , with template The parcel div That's it ,split-pane There are horizontal and vertical directions

Tried to find its documentation , The description is simple , Next, learn about its usage .

There are several parameters

Use... Like this , slot There are actually only two types ,paneL and paneR, What if you want three columns standing up , The solution I found is , Two vertical It's good to nest

So I set it around like this , Crazy Dolls , Can make all kinds of effects you want , Like the following

Basically, that's all , Relatively simple , Then fill in the content according to your own needs

Upload your avatar

The avatar is uploaded on @/views/components-demo/avator-upload.vue in ,

On the left is a dynamic avatar display , Good play The right side is upload Button , The function is based on vue-image-crop-upload. Introduced ImageCropper Components , Click on btn Show it when you

ImageCropper There are also many properties that can be configured , As shown below , For example, rotation is not displayed , Do not preview circles , Limit the size , Language type and other attributes

Overall, the avatar upload component is relatively small and fresh , Praise