Theese days I have been working on my personal website, i have decided to build an tiny terminal for quering my info. My personal info is also avaiable on the website but a developer's personal website needs to be a bit nerd :D. Website is build with vuejs and bootstrap. I'm a guy that doesn't like design so my website will not be prettiest in the world but at least, i´m trying to make it functional.
Site will be an index of my projects (python libraries especially), usefull links that i been storing during this working years.
And of course a CV, but it will be last part. First, you need implement the component, i choose a component that delegates movement of container on header, you can move function 'drag MouseDown' to modify the behaviour.
Draggable div component
Really simple, template with 3 slots for easy custom our component. We will need 3 methods:. onclick to start dragging. This method will register two functions to handle movement: onmousemove and mouseup.
Also, it will register the first position of the container. onmousemove: Will update position of our container.
mouseup: Will delete function handlers for functions onmousemove and itself. Only need position absolute and a z-index higher than the other page components.
Component use example
Components with slots are really easy to use on vue you only need to create a tag template with attribute slot, slot value will be target component.
- Vue Component for resize and drag elements. A lightweight, no-dependency. Use draggable, resizable or both. Define sticks for resizing. Save aspect ratio for resizable components.
- Restrict size and movement to parent element. Restrict drag to vertical or horizontal axis.
- Register the component:. Use the component:. Type: BooleanRequired: falseDefault: false. Determines whether the component should be active.
- Type: BooleanRequired: falseDefault: true. Determines whether the component should draggable. Type: BooleanRequired: falseDefault: true.
- Determines whether the component should resize. Type: BooleanRequired: falseDefault: false. Limits the scope of the component's change to its parent size.
Type: BooleanRequired: falseDefault: false. Determines whether the component should retain its proportions. Type: NumberRequired: falseDefault: 200. Define the initial width of the component. Type: NumberRequired: falseDefault: 200.
Define the initial height of the component. Type: NumberRequired: falseDefault: 50. Define the minimal width of the component. Type: NumberRequired: falseDefault: 50.
Install and basic usage
- Define the minimal height of the component. Type: NumberRequired: falseDefault: 0. Define the initial x position of the component. Type: NumberRequired: falseDefault: 0. Define the initial y position of the component.
- Type: Number|StringRequired: falseDefault: auto. Define the zIndex of the component. Type: ArrayRequired: falseDefault: ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'].
Define the array of handles to restrict the element resizing:.
tm - Top middle. mr - Middle right. br - Bottom right. bm - Bottom middle. bl - Bottom left. ml - Middle left. Type: StringRequired: falseDefault: both.