vue-focuspoint-component

Set focus point on elements

Demo

Demo here

Install

npm install vue-focuspoint-component or yarn add vue-focuspoint-component

Usage

The most common use case is to register the component globally. ```js // in your main.js or similar file import Vue from 'vue' import FocusPoint from 'vue-focuspoint-component' Vue.component('focus-point', FocusPoint) ``` Alternatively you can do this to register the components: ```js // HelloWorld.vue import FocusPoint from 'vue-focuspoint-component' export default { name: 'HelloWorld', components: {

FocusPoint

} } ``` On your page you can now use html like this: Image element ```html focus: { "x": 35, "y": 62 } ``` Other elements (use careful element with text has not the same ratio by a resize) ```html

class="jumbotron"

>

<h1>Hello, world!</h1>

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr...</p>

```

CSS

```scss // required and to get updates @import "./nodemodules/vue-focuspoint-component/src/scss/focus-point"; // simple theme @import "./nodemodules/vue-focuspoint-component/src/scss/focus-point-theme"; ``` Do you like my theme but not the colors or paddings, ...? ```scss @import "./nodemodules/vue-focuspoint-component/src/scss/focus-point"; // overwrite variables from the simple theme $focuspoint-background: blue; $focuspoint-border: 3px solid white; $focuspoint-radius: 2px; // find more variables in /src/scss/focus-point-variables.scss @import "./nodemodules/vue-focuspoint-component/src/scss/focus-point-theme"; ```

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 ```html

slot="pin"

>

<i class="cool-focus-icon"/>

```

Build Setup

``` bash

install dependencies

npm install

serve with hot reload at localhost:8080

npm run dev

build for production with minification

npm run build

build for production and view the bundle analyzer report

npm run build --report

run unit tests

npm run unit

run all tests

npm test ```