# view-avatar

> a vue avatar component, avatar

Latest version **1.0.0** (published 2020-06-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install view-avatar
pnpm add view-avatar
yarn add view-avatar
bun add view-avatar
```

## 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.0 |
| Published | 2020-06-07 |
| First published | 2020-05-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 6.0.0 |
| Dependencies | 3 |
| Unpacked size | 70 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Reber |
| Maintainers | reber |
| Keywords | avatar, vue avatar, view-avatar |

## Links

- npm: https://www.npmjs.com/package/view-avatar
- Repository: https://github.com/LwcReber/view-avatar
- Homepage: https://github.com/LwcReber/view-avatar#readme
- Issues: https://github.com/LwcReber/view-avatar/issues
- npm.io page: https://npm.io/package/view-avatar

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.5.2
- [vue-router](https://npm.io/package/vue-router.md) ^3.0.1
- [vue-popperjs](https://npm.io/package/vue-popperjs.md) ^2.3.0

## Alternatives

- [lodash.startswith](https://npm.io/package/lodash.startswith.md) — 769.7K weekly downloads
- [@tarojs/service](https://npm.io/package/@tarojs/service.md) — 33.9K weekly downloads
- [io.extendreality.tilia.indicators.spatialtargets.unity](https://npm.io/package/io.extendreality.tilia.indicators.spatialtargets.unity.md) — 131 weekly downloads
- [@rtarojs/taro](https://npm.io/package/@rtarojs/taro.md) — 90 weekly downloads
- [node-branch-io](https://npm.io/package/node-branch-io.md) — 50 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2020-06-07
- 0.0.2 — 2020-05-07

## README

#### **a vue component -> view-avatar**



源码文件 /src/index



打包后文件 /dist/index





#### How to use



1. 安装 `npm i -S view-avatar`



2. 在.vue文件中引入

​    
  ```javascript
    <script>    
    import ViewAvatar from 'view-avatar'
    export default {
      components: { ViewAvatar }
    }

    </script>
  ```

具体请运行  `npm run dev` 查看demo

代码请看example文件夹



####  Attributes  

| 参数          | 说明                                                         | 类型          | 可选值 | 默认值 |
| :------------ | ------------------------------------------------------------ | ------------- | ------ | ------ |
| src           | 图片src地址                                                  | String        | —      | —      |
| text          | 生成图片的源文字                                             | String        | —      | —      |
| width         | 宽度                                                         | String （px） |        |        |
| height        | 高度                                                         | String （px） |        |        |
| quickWidth    | 当不想使用width，height，使用此属性可以直接设置宽高一样的值  | String （px） |        |        |
| color         | 文字默认颜色                                                 | String        | —      | —      |
| bgColor       | 图片默认底色                                                 | String        |        |        |
| colors        | 图片的文字颜色组，当不设置color时，根据文字MD5的值，设置图片的文字颜色 | String        |        |        |
| bgColors      | 图片的底色颜色组，当不设置bgColor时，根据文字MD5的值，设置图片的底色颜色 | String        |        |        |
| borderRadius  | 图片显示形状，可以显示为圆形的方式，也可以设置关闭，默认有2px的border-radius | String        |        |        |
| textImgError  | 当图片显示错误时是否使用文字的方式显示图片，如不使用则默认用图片错误的方式处理 | Boolean       | false  |        |
| styles        | 图片的颜色style样式，可以覆盖文字，底色颜色等                | Object        | {}     |        |
| enablePopper  | 是否使用popper显示图片的信息，tooltips的效果                 | Boolean       | false  |        |
| placement     | 使用的popper出现的位置（top， right， bottom， left）        | String        | top    |        |
| popperOptions | popper的options属性（vue-popperjs）                          |               |        |        |


####  slot

|               |                          |
| ------------- | ------------------------ |
| —（默认方式） | 直接自定义图片           |
| imgError      | 图片错误处理             |
| text          | 文字自定义显示           |
| popper-text   | 自定义显示tooltips的内容 |



#### LICENSE

[MIT](https://github.com/LwcReber/view-avatar/blob/master/LICENSE)

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