在位编辑

在位编辑是一个小组件，正常情况下显示为普通的文字，点击的话可以进入编辑状态。这避免了新开页面或弹出窗口进行编辑，用户体验也不错。

在位编辑

使用方法

import InplaceInput from "~/comp/inplace-input";

// 回调，用户确认修改时调用
const onChangeText = (val) => {
  // 这里处理修改逻辑
};

<InplaceInput
  variant="h6"
  sx={{ flex: 1 }}
  text={info.name || ""}
  fontSize="large"
  onConfirm={onChangeText}
/>;

属性

InplaceInput 支持下列的属性:

属性	类型	默认值	说明
onConfirm	func	无	确认修改回调函数，`(val) => {}`
text	string / number	空	文字
variant	string	body2	传递给 Typography 组件
multiline	bool	false	是否多行，多行时回车换行，单行时回车确认
sx	object	null	传递给 Typography 组件
fullWidth	bool	true	传递给 TextField
fontSize	string	normal	传递给 TextField
placeholder	string	空	text 为空的情况下显示占位文字
color	string	空	传递给 Typography
maxLength	number	1000	最大输入长度
disabled	bool	false	是否禁止，禁止时不能进入编辑

在位编辑

使用方法​

属性​

使用方法

属性