This is the 23rd day of my participation in the August More Text Challenge.More challenges in August
SplitPane
Function is a split pane, you can drag, did not do related functions before, learn
The vue file is at @/views/ component-demo /split-pane.vue, and the library I use is vue-SplitPane
Using this method looks easy, but let’s start by defining a resize method
So it looks like I’m just going to wrap div around template, and split-pane has horizontal and vertical directions
I tried to find its documentation, the description is very simple, next to learn about its use.
There are several parameters
| attribute | value | explain |
|---|---|---|
| split | vertical / horizontal | Vertical/horizontal |
| min-percent | “20” | Minimum percentage |
| default-percent | “20” | Default percentage |
When used like this, slot actually has only two types, paneL and paneR. What if I want three vertical columns
So set to set to set, crazy dolls, can make a variety of their own want to effect, such as the following
Basically, these functions are relatively simple, and then fill in the content according to their own needs
Picture upload
@/views/ component-demo /avator-upload.vue
On the left is a dynamic avatar display. On the right is the Upload button, which is based on vue-image-corp-upload. The ImageCropper component was introduced to display BTN when it is clicked
ImageCropper also provides many properties that can be configured, as shown below, such as no rotation, no preview of circles, limited size, language type, etc
Overall, this avatar upload component is still relatively small and fresh, praise