vue-focuspoint-component

Set focus point on elements

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
vue-focuspoint-component
3312.0.16 years ago7 years agoMinified + gzip package size for vue-focuspoint-component in KB

Readme

vue-focuspoint-component
Set focus point on elements
npm license npm

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