移动端问题总结

• 解决移动端 1px 线的问题

&:after {
  border: 1px solid red;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
  -webkit-transform-origin: left top;
  transform-origin: left top;
}

• 移动端安卓手机和苹果手机 placeholder 不垂直居中的问题

设置 line-height 与 font-size 相等，input 高度用 padding 填充。

• 分享功能、登录功能 结合钉钉

钉钉开发文档：https://ding-doc.dingtalk.com/doc#/dev/swk0bg

• 上传文件 图片 功能实现 （当没有合适的 UI 组件时考虑使用）

// 文件上传
fileChange = async e => {
  const formData = new FormData();
  const filrData = document.getElementById("file").files;
  formData.append("file", filrData[0]);
  formData.append("type", "avatar");
  const fileurl = await postData(Api.upload, formData, {
    "Content-Type": "multipart/form-data"
  });
  // 其他操作。。。
};

<div
  className={styles.fileWarpper}
  style={{ background: avatar === "" ? "" : `url(${avatar})` }}
>
  <input
    type="file"
    accept="image/*" // 指定文件的类型
    className={styles.fileUpload}
    onChange={this.fileChange}
    id="file"
  />
</div>;

.fileWarpper {
  width: 100px;
  height: 100px;
  background-size: 100px 100px !important;
  background-repeat: no-repeat;
  .fileUpload {
    width: 100px;
    height: 100px;
    opacity: 0;
    z-index: 1000;
  }
}

• h5 软键盘把内容顶上去了