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 import Vue from 'vue' import FocusPoint from 'vue-focuspoint-component' Vue.component('focus-point', FocusPoint)Alternatively you can do this to register the components:
// 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
<!-- set focus point in `focus` --> <focus-point v-model="focus" > <img src="https://is.example.com/image.jpg"> </focus-point> <!-- after click `focus` shows like this --> focus: { "x": 35, "y": 62 } <!-- example to get image from image server --> <img src="https://is.example.com/{focus.x}/{focus.y}/1024/768/image.jpg"> <!-- output: we get from a 1920x1080 image the focus [35%:62% into 1024x768] --> <img src="https://is.example.com/35/62/1024/768/image.jpg">Other elements (use careful element with text has not the same ratio by a resize)
<focus-point v-model="element" > <div class="jumbotron" > <h1>Hello, world!</h1> <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr...</p> </div> </focus-point>CSS
// 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, ...?
@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
<focus-point v-model="image" > <template slot="pin" > <i class="cool-focus-icon"/> </template> <img src="https://is.example.com/image.jpg"> </focus-point>Build Setup
# 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
