前言
最近想实现用户选择头像和更换头像的功能,采用 antd-mobile 组件库,但其样式并不能满足自身要求,所以在其基础上进行了一点修改。注意呀,我这只是单机,并没有上传后台,因为我只是做来玩玩的…
思路
- 不用
ImagePicker
来显示选择的图片,而采取独立的img
来显示 - 当没选择图片时,
img
显示默认图片,选择后,img
则显示对应图片 - 给
ImagePicker
和img
绝对定位且宽高等等一样,并设置img
的z-index
小于ImagePicker
的层级 - 设置
ImagePicker
背景为透明,以便显示层级低的img
效果图
实现
jsx文件:
import React, {Component} from 'react'
import {
WingBlank,
NavBar,
ImagePicker
} from 'antd-mobile'
// 引入自己修改的样式
import './info.less'
// 引入默认的图片
import logo from '../../assets/img/logo.jpg'
export default class Info extends Component {
state = {
avator:[]
}
// 选择图片
change = (files, type, index) => {
this.setState({
avator: files
})
}
render() {
const {avator} = this.state
const avatorImg = () => {
// 如果选择了图片就用选择后的图作为头像
if (avator[0]) {
return <img className='user-avatar' src={avator[0].url} alt=""/>
} else {
// 没有选择图片则默认显示引入的 logo
return <img className='user-avatar' src={logo} alt=""/>
}
}
return (
<div className='demo'>
<NavBar>聊天</NavBar>
<WingBlank className='user-avatar-upload'>
{avatorImg()}
<ImagePicker
onChange={this.change}
accept="image/gif,image/jpeg,image/jpg,image/png"
/>
</WingBlank>
</div>
)
}
}
less文件:
.user-avatar-upload{
position: relative;
left: 50%;
width: 8rem;
height: 8rem;
margin: 2rem 0;
transform: translate3d(-65%, 0, 0);
// 头像图片
.user-avatar{
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
border-radius: 50%;
}
// 图片上传
.am-image-picker{
position: absolute;
width: 100%;
height: 100%;
.am-image-picker-list{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
.am-flexbox{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border-radius: 50%;
overflow: hidden;
// 不显示其他
.am-flexbox-item{
display: none;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border-radius: 50%;
}
// 只显示上传
.am-flexbox-item:nth-child(1){
display: block;
input{
width: 100%;
height: 100%;
}
}
.am-image-picker-upload-btn{
border: 0;
// 设置透明背景以便看底层 img
background-color: transparent!important;
// 去掉上传的 + 号
&:before,&:after{
content: none!important;
}
}
}
}
}
}