vue-focuspoint-component
Set focus point on elements
Demo
Install
npm install vue-focuspoint-component
or yarn add vue-focuspoint-component
Usage
The most common use case is to register the component globally.
// in your main.js or similar file Vue
Alternatively you can do this to register the components:
// HelloWorld.vue name: 'HelloWorld' components: FocusPoint
On your page you can now use html like this:
Image element
<!-- set focus point in `focus` --> <!-- after click `focus` shows like this -->focus: { "x": 35, "y": 62} <!-- example to get image from image server --><!-- output: we get from a 1920x1080 image the focus [35%:62% into 1024x768] -->
Other elements (use careful element with text has not the same ratio by a resize)
Hello, world! Lorem ipsum dolor sit amet, consetetur sadipscing elitr...
CSS
// required and to get updates ;// simple theme ;
Do you like my theme but not the colors or paddings, ...?
; // overwrite variables from the simple theme ;;;// find more variables in /src/scss/_focus-point-variables.scss ;
V-Model
Type | Required | Default | Description |
---|---|---|---|
Object | false | { x: 50, y: 50 } |
Focus |
Slots
Name | Description |
---|---|
pin | Inner html from pin |
Slots example
Create your own pin
Build Setup
# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production and view the bundle analyzer reportnpm run build --report# run unit testsnpm run unit# run all testsnpm test