# vanghua-image-selector

> A Vue.js project

Latest version **1.0.4** (published 2021-10-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install vanghua-image-selector
pnpm add vanghua-image-selector
yarn add vanghua-image-selector
bun add vanghua-image-selector
```

## 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.4 |
| Published | 2021-10-04 |
| First published | 2021-10-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 28.4 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Vanghua |
| Maintainers | vanghua |

## Links

- npm: https://www.npmjs.com/package/vanghua-image-selector
- npm.io page: https://npm.io/package/vanghua-image-selector

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.5.11

## Recent versions

- 1.0.4 (latest) — 2021-10-04
- 1.0.3 — 2021-10-03
- 1.0.2 — 2021-10-03
- 1.0.1 — 2021-10-03

## README

# vanghua-iamge-selector

> 基于Vue的面向移动端的图片选择器组件

## 引入组件

``` bash
# 安装组件
npm install vanghua-image-selector

# 局部引用
import VanghuaImageSelector from "vanghua-image-selector"
```

## 提供接口
|  属性接口   | 描述  | 单位 |
|  ----  | ----  | ---- |
| height  | 控制展示框的高度 | 同css中的height单位 |
| width  | 控制展示框的宽度 | 同css中的width单位 |
| type | 控制图片选择框的类型 | 'circle'表示圆形，用于头像选取; 'rec'表示矩形，用于背景选取|
| innerStyle | 控制展示框的样式 | 类型是对象，用于给展示框设置样式 |

|  事件接口   | 描述  | 单位 |
|  ----  | ----  | ---- |
## 使用教程

```vue
<template>
  <div class="container">
    <vanghua-image-selector width="100%" height="9em" type="rec" background="cornflowerblue"></vanghua-image-selector>
    <vanghua-image-selector :innerStyle=" {position: 'absolute', top: '5.5em', left: '2em'}" @finished="handleFinished"></vanghua-image-selector>
  </div>
</template>

<script>
import VanghuaImageSelector from "vanghua-image-selector";
export default {
  name: "Home",
  components: {
    "vanghua-image-selector": VanghuaImageSelector
  },
  methods: {
    handleFinished(image) {
      console.log(image)
    }
  }
}
</script>

<style scoped>
.container {
  height: 100%;
  background: #42b983;
  position: relative;
}
</style>
```

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