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
- Host: GitHub
- URL: https://github.com/evodiaaut/vue-focuspoint-component
- Owner: EvodiaAut
- License: mit
- Created: 2017-12-28T22:09:02.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-05-02T07:25:55.000Z (about 1 year ago)
- Last Synced: 2025-03-12T01:46:23.898Z (3 months ago)
- Topics: component, focuspoint, javascript, vue, vue-component, vue2, vuejs, vuejs2
- Language: JavaScript
- Homepage: https://evodiaaut.github.io/vue-focuspoint-component
- Size: 1.05 MB
- Stars: 33
- Watchers: 1
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.md
Awesome Lists containing this project
README
# vue-focuspoint-component
> Set focus point on elements
[](https://www.npmjs.com/package/vue-focuspoint-component)
[](https://github.com/EvodiaAut/vue-focuspoint-component/blob/master/LICENSE.md)
[](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
```