# @liaoqinwei/vue-handle-control

> vue手柄控制器

Latest version **0.0.1** (published 2023-06-09) · 0 weekly downloads

## Install

```sh
npm install @liaoqinwei/vue-handle-control
pnpm add @liaoqinwei/vue-handle-control
yarn add @liaoqinwei/vue-handle-control
bun add @liaoqinwei/vue-handle-control
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2023-06-09 |
| First published | 2023-06-04 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 112 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | liaoqinwei |

## Links

- npm: https://www.npmjs.com/package/@liaoqinwei/vue-handle-control
- npm.io page: https://npm.io/package/@liaoqinwei/vue-handle-control

## Dependencies (2)

- [gsap](https://npm.io/package/gsap.md) ^3.11.5
- [vue-demi](https://npm.io/package/vue-demi.md) ^0.14.5

## Recent versions

- 0.0.1 (latest) — 2023-06-09
- 0.0.0 — 2023-06-04

## README

# vue手柄控制器

vue手柄控制器

## 在线demo

[demo](http://meta.cunjiuyeshu.top/handle-control/index.html#/)



## 案例

```bash
npm install @liaoqinwei/vue-handle-control

```

disable:boolean 是否禁用

event-process-el:HTMLElement | Window 会根据传入元素的包围盒计算手指的有效区域

```vue
<script setup lang="ts">
import { HandleControl } from "@liaoqinwei/vue-handle-control"
import { Ref, ref } from "vue"

const box: Ref<HTMLDivElement | undefined> = ref()


function onChange(ev) {
  console.log(ev)

  /**
   * ev 
   * {
   *  radius: number,
   *  offsetByOriginX: number, 
   *  offsetByOriginY: number, 
   *  pageX: number,
   *  pageY: number,
   * }
   */
}

</script>

<template>
  <div class="box" ref="box">
    <HandleControl @change="onChange" :disable="false" :event-process-el="box"></HandleControl>
  </div>
</template>

<style scoped>
.box {
  width: 200px;
  height: 200px;
}
</style>

```

in your main.js
```javascript

// ... your code

import "@liaoqinwei/vue-handle-control/lib/style.css"

// ... your code
```

---
_Source: https://npm.io/package/@liaoqinwei/vue-handle-control · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._