Vue.js的焦点组件 - vue-focuspoint-component

Vue.js的焦点组件 - vue-focuspoint-component
插件名称 vue-focuspoint-component
发布时间 2020年11月1日
插件作者 EvodiaAut

通过Vue.js组件,您可以在元素上设置焦点。

安装和下载:

# Yarn
$ yarn add vue-focuspoint-component

# NPM
$ npm install vue-focuspoint-component --save

用法

最常见的用例是全局注册组件。

import Vue from 'vue'
import FocusPoint from 'vue-focuspoint-component'

Vue.component('focus-point', FocusPoint)

或者,您可以执行以下操作来注册组件:

import FocusPoint from 'vue-focuspoint-component'

export default {
  name: 'HelloWorld',
  components: {
    FocusPoint
  }
}

现在,您可以在页面上使用html,如下所示:

图像元素

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

其他元素(通过调整大小使用小心的元素与文本的比例不同)

<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

@import "./node_modules/vue-focuspoint-component/src/scss/focus-point";
@import "./node_modules/vue-focuspoint-component/src/scss/focus-point-theme";
@import "./node_modules/vue-focuspoint-component/src/scss/focus-point";
$focuspoint-background: blue;
$focuspoint-border: 3px solid white;
$focuspoint-radius: 2px;
@import "./node_modules/vue-focuspoint-component/src/scss/focus-point-theme";