页面显示效果
点击编辑显示效果
由于项目频繁修改相关信息,并单独提交,为了方便,封装了一个简单的组件组件依赖antd(用到了图标和Input组件这不用可以省略)组件宽高显示为自适应控制父级大小即可,类型可无限扩展
/**
- 输入框修改组件接收参数:
- value: 展示内容
- fontSize: 展示字体大小
- iconColor: 图标颜色
- inputWidth: 输入框宽度 默认100px
- showSize: 最多显示的字数
- type: (string) number、url、可不传不做限制
- required: true为必填
- amount: 字数最大限制
- name: 为字段名
- id: 需要的id
- idName: id的字段名
- handleDelete(): 删除回调
- handleOk(): 点击对号回调
**/
调用代码
<ChangeInput
fontSize='14px' //显示字体大小
iconColor="#5f68ea" //鼠标滑过icon图标颜色
inputWidth="400px" //输入框宽度,高度自适应
showSize="30" //可展示字数,溢出隐藏,滑过展示全部
amount="30" //字数限制长度
type="number" //可输入类型
handleOk={this.handleOk} //点击对号回调
value="17600381667" //传入内容
name="firmFax" //地段名
/>
组件代码:
import React from 'react';
import {Icon, Input, message, Tooltip} from 'antd';
export default class ChangeInput extends React.Component {
constructor(props) {
super(props);
this.state = {
showInput:false, //输入框显示隐藏
valueCon:'', //input框回显字段
}
}
//点击展示输入框
handleChangeClick = () => {
this.setState({
showInput:true
})
};
//点击关闭输入框
handleCloseClick = () => {
this.setState({
showInput:!this.state.showInput
})
};
//去空格
trim = (str) => {
return str.replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,'');
};
//点击确定按钮
handleAffirmClick = () => {
//判断不为空
if(this.props.required&&this.trim(this.state.valueCon)===''||this.props.required&&this.trim(this.state.valueCon)==='-') {
message.error(`此字段不能为空及特殊字符'-'`);
return false
}
//判断为数字
if(this.props.type&&this.props.type==="number"&&isNaN(this.trim(this.state.valueCon))) {
message.error(`请输入数字`);
return false
}
//判断网址
let reg=/^\\{2}[\w-]+\\(([\w-][\w-\s]*[\w-]+[$$]?$)|([\w-][$$]?$))/;
if(this.props.type&&this.props.type==="url"&&!reg.test(this.props.valueCon)){
message.error("这网址不是以http://https://开头,或者不是网址!");
return false
}
//判断字数长度
if(this.trim(this.state.valueCon).length>this.props.amount){
message.error(`字数不得超过${this.props.amount}个字`);
return false
}
//回调确定方法
let obj = {};
// obj.value = this.state.valueCon;
// obj.label = this.props.name;
obj[ this.props.name] = this.state.valueCon;
//判断是否需要id
if(this.props.idName){
obj[this.props.idName] = this.props.id;
}
this.props.handleOk(obj);
//关闭输入框
this.setState({
showInput:this.props.isShow
})
};
//input改变
handleChange = (e) => {
console.log(e.target.value);
this.setState({
valueCon:e.target.value
})
};
componentDidMount() {
this.setState({
valueCon:this.props.value,
})
}
handleDeleteClick = () =>{
let obj = {};
// obj.value = this.state.valueCon;
// obj.label = this.props.name;
obj[ this.props.name] = this.state.valueCon;
//判断是否需要id
if(this.props.idName){
obj[this.props.idName] = this.props.id;
}
this.props.handleDelete(obj);
};
render() {
const {value,fontSize,iconColor,inputWidth,showSize} = this.props;
console.log(value)
return (
<div>
{!this.state.showInput?
<div className="change_input">
<span className="change_input_name" style={{fontSize:fontSize}} >
{showSize&&value.length>showSize?
<Tooltip title={value}>
<span>{value.slice(0,showSize)+"..."}</span>
</Tooltip> :value
}
<Icon type="edit"
style={{color:iconColor}}
className="change_input_hide_change"
onClick={this.handleChangeClick}
/>
{this.props.handleDelete&&
<Icon type="delete"
style={{color:iconColor}}
className="change_input_hide_change"
onClick={this.handleDeleteClick}
/>
}
</span>
</div>
:
<div className="write_input">
<div className="write_input_name" style={{width:inputWidth?inputWidth:'100px'}}>
<Input placeholder="请输入"
defaultValue={this.props.value==='-'?'':this.props.value}
onChange={this.handleChange}
style={{height:'25px',margin:'0'}}
/>
</div>
<div className="write_input_hide" style={{color:iconColor}}>
<Icon type="check-circle" className="write_input_hide_yes" onClick={this.handleAffirmClick}/>
<Icon type="close-circle" className="write_input_hide_no" onClick={this.handleCloseClick} />
</div>
</div>
}
</div>
)
}
}
css代码
.change_input{
width: 100%;
//background: slateblue;
height: 100%;
overflow: hidden;
word-break: break-all;
.change_input_name{
//float: left;
.change_input_hide_change{
margin-left: 5px;
cursor: pointer;
display: none;
}
}
&:hover{
.change_input_name{
.change_input_hide_change{
display: inline-block;
}
}
}
}
.write_input{
height: 100%;
overflow: hidden;
.write_input_name{
//height: 98%;
float: left;
}
.write_input_hide{
height: 100%;
float: left;
//background: seagreen;
.write_input_hide_yes{
margin-left: 5px;
}
.write_input_hide_no{
margin-left: 5px;
}
//width: 100px;
}
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。