# ux-feature-avatar

> 头像组件

Latest version **1.1.3** (published 2019-11-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install ux-feature-avatar
pnpm add ux-feature-avatar
yarn add ux-feature-avatar
bun add ux-feature-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.1.3 |
| Published | 2019-11-13 |
| First published | 2018-10-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 393.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | yinjikai@beisen.com |
| Maintainers | beisencorp |

## Links

- npm: https://www.npmjs.com/package/ux-feature-avatar
- Repository: https://github.com/talentui/pb-components-templates
- Homepage: https://github.com/talentui/pb-components-templates#readme
- Issues: https://github.com/talentui/pb-components-templates/issues
- npm.io page: https://npm.io/package/ux-feature-avatar

## Dependencies (4)

- [@beisen/helper](https://npm.io/package/@beisen/helper.md) ^1.0.4
- [@beisen/tool-tip](https://npm.io/package/@beisen/tool-tip.md) ^0.1.71
- [@beisen/common-func](https://npm.io/package/@beisen/common-func.md) 0.0.13-3
- [@beisen-cmps/feature-utils](https://npm.io/package/@beisen-cmps/feature-utils.md) ^2.0.0

## Recent versions

- 1.1.3 (latest) — 2019-11-13
- 1.1.2 — 2019-11-13
- 1.1.1 — 2019-11-12
- 1.1.0 — 2019-07-29
- 1.0.76 — 2019-05-10
- 1.0.75 — 2019-05-07
- 1.0.74 — 2019-04-02
- 1.0.73 — 2019-03-20
- 1.0.72 — 2019-03-13
- 1.0.71 — 2019-02-13
- 1.0.70 — 2019-01-30
- 1.0.69 — 2019-01-22
- 1.0.68 — 2019-01-22
- 1.0.66 — 2019-01-10
- 1.0.65 — 2018-12-21
- … 36 more at https://npm.io/package/ux-feature-avatar/versions

## README

## 头像组件

---

## 支持特性

-   [x] 挂件
-   [x] 勋章
-   [x] 卡片

### 对接

#### 提供两种对接方案：(推荐使用第二种，只需要在承载页加载我们的  公共节点( 前端公共配置 Node23)即可,每次不用升级直接  用到头像组件新特性)

一. 通过 npm 安装

> npm install ux-feature-avatar --save

```javascript
import AvatarCmp from 'ux-feature-avatar'
class AvatarDemo extends Component {
    render() {
        const avatar_config = {
           "name": "啦啦啦",
            "avatar": {
                "hasAvatar":'true',
                "img": '//cache.tms.beisen.cn/Image/101055/ec2102b9dc444140b78bff744420517a_l.jpeg',
                "color": "#f0c75a"
            },
            "blessingType": 1,//祝福类型  1生日 2入职 3节日
            enableFeatures: true,//是否开通送祝福
            // simpleMode: false,//只显示头像
            "medalurl": medalUrl,
            enableJump:true,//是否支持跳转个人主页
            "userId": 112984691,
            "size": 80,
            decorationType: 3,//挂件类型，为4文化标签，3系统勋章，2企业勋章，1祝福
            // showHonorCard: false,
            "udc": bless: { ext: { type: "bless", "from": "prfile-avatar", to: userid } },//祝福挂件打点标记
                medal: { ext: { type: "medal", desc: "view-wall", from: "profile-avatar" } }//勋章挂件打点标记
            }
        }

             return <div className="_avatar-wrap">
                    <AvatarCmp {...avatar_config} />
             </div >


    }
}
ReactDOM.render(< AvatarDemo/>, document.getElementById('app'))
```

二. 通过动态标签引入

```javascript
//通过动态插入标签方式加载头像组件
export function loadAvatarCmp(id, callback) {
    const featureAvatarVersion = window.__italent_common_cmps__ && window.__italent_common_cmps__.featureAvatar_version || '1.0.19'
    if (!document.getElementById(id) || !window.AvatarCmp) {
        const script = document.createElement('script');
        script.type = "text/javascript"
        script.id = id
        if (script.readyState) {
            script.onreadystatechange = function () {
                if (script.readyState == 'loaded' || script.readyState == 'completed') {
                    script.onreadystatechange = null;
                    callback && callback()
                }
            }
        } else {
            script.onload = function () {
                callback && callback()
            }
        }
        script.src = `//stnew.beisen.com/ux/upaas/ux-feature-avatar/release/dist/main-${featureAvatarVersion}.min.js`;
        document.body.appendChild(script)
    } else {
        callback && callback()
    }
}

class AvatarDemo extends Component {
    constructor(porps){
        super(props)
        this.state={
            AvatarCmp:''
        }
    }
    componentDidMount(){
        loadAvatarCmp('__common_feature_avatar',()=>{
            this.setState({
                AvatarCmp:window.AvatarCmp
            })
        })
    }
    render() {
        const avatar_config = {
           "name": "啦啦啦",
            "avatar": {
                "hasAvatar":'true',
                "img": '//cache.tms.beisen.cn/Image/101055/ec2102b9dc444140b78bff744420517a_l.jpeg',
                "color": "#f0c75a"
            },
            "blessingType": 1,//祝福类型
            enableFeatures: true,//是否开通送祝福
            // simpleMode: false,//只显示头像
            "medalurl": medalUrl,
            "userId": 112984691,
            "size": 80,
            decorationType: 3,//挂件类型，为4文化标签，3系统勋章，2企业勋章，1祝福
            // showHonorCard: false,
            "udc": bless: { ext: { type: "bless", "from": "prfile-avatar", to: userid } },//祝福挂件打点标记
                medal: { ext: { type: "medal", desc: "view-wall", from: "profile-avatar" } }//勋章挂件打点标记
            }
        }
        const {AvatarCmp} =this.state;

             return <div className="_avatar-wrap">
                    {AvatarCmp&&<AvatarCmp {...avatar_config} />}
             </div >


    }
}
ReactDOM.render(< AvatarDemo/>, document.getElementById('app'))
```

##### 如需协助对接可以直接联系我 yinjikai@beisen.com

## CHANGELOG

### 1.0.68

-   调用祝福㊗ ️ 时 追加参数，添加祝福类型

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