2.0.16 • Published 3 years ago
cmp-props-editor v2.0.16
cmp-props-editor
组件平台使用的属性编辑器,根据组件的属性配置,动态创建对应的控件来编辑属性值,属性命名需要遵守下文的命名规范。
组件命名规范是自定义的规范,主要是以属性的后缀名
进行区分,比如后缀是Color
,采用颜色选择器,后缀是Image
,采用图片选择框,具体支持的后缀,下面的规范会列出。
使用
npm install cmp-props-editor --save
import PropsEditor form 'cmp-props-editor';
import 'cmp-props-editor/dist/props-editor.css;
编辑器的属性说明
编辑器提供了如下属性,用于分析组件的属性,创建组件,属性如下:
- cmpType 传入React组件的类型,类型是
function
- cmpProps 组件的预定义的属性值,如果没有,从
cmpType
的默认属性defaultProps
值获取 - onChange 提供onChange事件,返回属性编辑器修改后的属性集
组件属性命名规范
组件是通过规范属性的后缀名来区分对应的编辑控件的,主要支持如下的后缀:
- Text 普通文本
- Image 图片链接
- Color 颜色
- Box 内边距/外边距,包括:top,right,bottom,left
- Bg 背景色 backgroundColor,backgroundImage,backgroundRepeat,backgroundPosition
- Border 边框,包括:borderWidth,borderStyle,borderColor
- List 选择列表
- 其他 普通文本框
如果不使用后缀,也可以在propsMap
中自定义,设置type
为后缀名即可。
说明,针对类型
object
的属性,建议自定义编辑器支持。
组件书写规范
组件需要提供三个静态类型提供支持:
- propTypes React自带的定义
- defaultProps 默认属性值
- propsMap 属性的定义,包括中文名,或复杂配置
import React, { Component } from 'react';
import PropTypes from 'prop-types';
class CmpTest extends Component {
state = { }
static propTypes={
title:PropTypes.string,
logoImage:PropTypes.string,
backgroundColor:PropTypes.string,
overflow:PropTypes.string
}
static defaultProps={
title:'测试标题',
logoImage:'',
backgroundColor:'#fff',
overflow:'visible'
}
//配置属性的中文名称或者自定义配置
static propsMap={
title:'标题',
logoImage:'Logo链接',
backgroundColor:'背景色',
overflow: {
type: 'List',
name: '溢出(overflow)',
hidden:false,
value: {
'visible': '默认',
'hidden': 'hidden',
'scroll': 'scroll',
'auto': 'auto',
'inherit': 'inherit'
}
},
}
render() {
let me=this;
return (
<div>
{
JSON.stringify(me.props,null,4)
}
</div>
);
}
}
export default CmpTest;
propsMap如果设置为字符串,表示该属性的显示名称,如果设置为对象,表示对该属性的配置,例如
backgroundColor:'背景色'
和
backgroundColor:{
type:'Color',
name:'背景色'
}
的效果是一样的,都是启用Color选择器。
属性编辑器使用
import React, { Component } from 'react';
import PropsEditor from '../src/props-editor';
import CmpText from './cmp-test';
class Index extends Component {
state = {
cmpProps: {}
}
onPropsChange(cmpProps) {
this.setState({
cmpProps
})
}
render() {
let me = this;
let {
cmpProps
} = me.state;
return (
<div>
<PropsEditor cmpType={CmpText} cmpProps={cmpProps} onChange={me.onPropsChange} />
<CmpText {...cmpProps} />
</div>
);
}
}
export default Index;
2.0.16
3 years ago
2.0.15
4 years ago
2.0.14
4 years ago
2.0.13
4 years ago
2.0.12
4 years ago
2.0.11
4 years ago
2.0.9
4 years ago
2.0.7
4 years ago
2.0.5
4 years ago
2.0.4
4 years ago
2.0.6
4 years ago
2.0.3
4 years ago
2.0.2
4 years ago
2.0.1
4 years ago
2.0.0
4 years ago
1.0.16
5 years ago
1.0.14
5 years ago
1.0.13
5 years ago
1.0.12
5 years ago
1.0.11
5 years ago
1.0.10
5 years ago
1.0.9
5 years ago
1.0.8
5 years ago
1.0.7
5 years ago
1.0.6
5 years ago
1.0.5
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago