An open API service indexing awesome lists of open source software.

https://github.com/evodiaaut/vue-focuspoint-component

Set focus point on elements
https://github.com/evodiaaut/vue-focuspoint-component

component focuspoint javascript vue vue-component vue2 vuejs vuejs2

Last synced: 3 months ago
JSON representation

Set focus point on elements

Awesome Lists containing this project

README

        

# vue-focuspoint-component

> Set focus point on elements

[![npm](https://img.shields.io/npm/v/vue-focuspoint-component.svg?style=for-the-badge)](https://www.npmjs.com/package/vue-focuspoint-component)
[![license](https://img.shields.io/github/license/mashape/apistatus.svg?style=for-the-badge)](https://github.com/EvodiaAut/vue-focuspoint-component/blob/master/LICENSE.md)
[![npm](https://img.shields.io/npm/dt/vue-focuspoint-component.svg?style=for-the-badge)](https://www.npmjs.com/package/vue-focuspoint-component)

## Demo

[Demo here](https://evodiaaut.github.io/vue-focuspoint-component/)

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


Hello, world!


Lorem ipsum dolor sit amet, consetetur sadipscing elitr...


```

## CSS

```scss
// required and to get updates
@import "./node_modules/vue-focuspoint-component/src/scss/focus-point";
// simple theme
@import "./node_modules/vue-focuspoint-component/src/scss/focus-point-theme";
```

Do you like my theme but not the colors or paddings, ...?

```scss
@import "./node_modules/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 "./node_modules/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




```

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