Ux-feature-avatar NPM

头像组件

支持特性

挂件
勋章
卡片

对接

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

一. 通过 npm 安装

npm install ux-feature-avatar --save

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'))

二. 通过动态标签引入

//通过动态插入标签方式加载头像组件
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'))