current position:Home>No.23 Vue element admin learn to use (XVIII) splitpane and upload avatars

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

2021-08-27 09:42:40 dangsh

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

image.png

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

image.png

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

image.png

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

There are several parameters

attribute value explain
split vertical / horizontal vertical / level
min-percent "20" Minimum percentage
default-percent "20" Default percentage

image.png

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

image.png

image.png

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

image.png

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

image.png

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

image.png

image.png

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

copyright notice
author[dangsh],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827094236382E.html

Random recommended