- 解决移动端 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 软键盘把内容顶上去了