# vue-mark-image

> 图片锚点组件

Latest version **1.0.2** (published 2020-06-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-mark-image
pnpm add vue-mark-image
yarn add vue-mark-image
bun add vue-mark-image
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2020-06-01 |
| First published | 2020-06-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=8.9.1 |
| Dependencies | 10 |
| Unpacked size | 881.2 KB |
| Known vulnerabilities | 0 (+25 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Aresn |
| Maintainers | zgeaw |
| Keywords | plus, vue, vue.js, component, components, ui, framework |

## Links

- npm: https://www.npmjs.com/package/vue-mark-image
- Repository: https://github.com/zgeaw/vue-mark-image
- Issues: https://github.com/zgeaw/vue-mark-image/issues
- npm.io page: https://npm.io/package/vue-mark-image

## Dependencies (10)

- [axios](https://npm.io/package/axios.md) ^0.15.3
- [jquery](https://npm.io/package/jquery.md) ^3.5.1
- [deepmerge](https://npm.io/package/deepmerge.md) ^2.2.1
- [popper.js](https://npm.io/package/popper.js.md) ^1.14.6
- [tinycolor2](https://npm.io/package/tinycolor2.md) ^1.4.1
- [js-calendar](https://npm.io/package/js-calendar.md) ^1.2.3
- [async-validator](https://npm.io/package/async-validator.md) ^1.10.0
- [lodash.throttle](https://npm.io/package/lodash.throttle.md) ^4.1.1
- [v-click-outside-x](https://npm.io/package/v-click-outside-x.md) ^3.5.6
- [element-resize-detector](https://npm.io/package/element-resize-detector.md) ^1.2.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2020-06-01
- 1.0.1 — 2020-06-01
- 1.0.0 — 2020-06-01

## README

## Install

Using npm:
```
npm install vue-mark-image --save

import VueMarkImage from 'vue-mark-image';
Vue.use(VueMarkImage);

```

## Usage

```vue
<template>
  <VueMarkImage ref="vueMarkRef" :imgUrl="imgUrl" :markList="markList" @change="changeMark" @click="clickMark" />
</template>
<script>
  import { VueMarkImage } from 'VueMarkImage';
  export default {
    components: { VueMarkImage },
    data(){
      return {
        imgUrl: require('../assets/images/2d.jpg'),
        markList: [
          {
            id: 11,
            x: 320.9479064941406,
            y: 222.3333282470703,
            color: 'red'
          },
          {
            id: 22,
            x: 527.9479064941406,
            y: 292.3333282470703,
            color: 'red'
          }
        ]
      };
    },
    mounted(){},
    methods: {
      // 锚点改变
      changeMark(array){
        console.log('锚点改变', array);
      },
      // 设置锚点颜色
      changeMarkColor(){
        this.$refs.vueMarkRef.setMarkColor([11, 22], 'green');
      },
      // 删除锚点
      deleteMark(){
        this.$refs.vueMarkRef.deleteMark([11, 22]);
      },
      // 锚点点击
      clickMark(markId){
        console.log('点击了', markId);
      }
    }
  };
</script>
```

## API AreaSelect
## props
属性|说明|类型|默认值
:-------: | -------  |  :-------:  |  :-------:
width |  默认宽度  | String |  850px
height |  默认高度  | String |  850px
imgUrl |  图片地址，网络地址或base64  | String |  -
defaultColor |  默认颜色，十六进制颜色码  | String |  #666
markList |  默认锚点数据  | Array |  例子[{id: 1,x: 320.9479064941406,y: 222.3333282470703,color: 'red'}]

## events
事件名|说明|返回值|返回值参数说明
:-------: | -------  |  :-------:  |  :-------:
change |  增加或删除锚点时触发  | Function | 返回值，数组，如[{id: 1,x: 320.9479064941406,y: 222.3333282470703,color: 'red'}]
click |  锚点点击事件  | Function | 返回值，锚点id


Copyright (c) 2020-05-29, 32237384@qq.com

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