react使用antd-mobile做自定义替换头像功能

前言

最近想实现用户选择头像和更换头像的功能，采用 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;
          }
        }
      }
    }
  }
}

标签：自定义,img,mobile,100%,am,height,react,width,ImagePicker
来源： https://blog.csdn.net/m0_46627730/article/details/112755674