@luban-h5/plugin-common-props

鲁班H5 组件通用属性

• 可以简单理解为类似 React 的 PropsType
• 为了方便组件开发者在开发自定义组件的时候，快速引用

以开发一个按钮组件为例

需要在右边属性编辑面板(如下图)配置按钮的如下属性：

• 显示文字(字符串类型: PropTypes.string, 对应一个文本输入框)
• 字体大小(数值类型: PropTypes.number, 对应一个数字输入框)
• 边框宽度(数值类型: PropTypes.number, 对应一个数字输入框)
• 文字颜色(颜色类型: PropTypes.color, 对应一个颜色选择器)
• 背景色(颜色类型: PropTypes.color, 对应一个颜色选择器)
• 文字对齐(颜色类型: PropTypes.textAlign, 对应对齐选择器)

我们在开发按钮组件的时候，只要配置其 props 参照如下即可

export default {
  name: 'luban-h5-button',
  props: {
    text: PropTypes.string(),
    backgroundColor: PropTypes.color({
      label: '背景色',
      defaultValue: 'rgba(255, 255, 255, 0.2)'
    }),
    color: PropTypes.color(),
    fontSize: PropTypes.number({ label: '字号(px)' }),
    borderWidth: PropTypes.number({
      label: '边框宽度(px)',
      defaultValue: 1
    }),
    borderRadius: PropTypes.number({
      label: '圆角(px)',
      defaultValue: 4
    }),
    borderColor: PropTypes.color({
      label: '边框颜色',
      defaultValue: '#ced4da'
    }),
    textAlign: PropTypes.textAlign()
  }
}

通用配置

类型	PropTypes[type]	默认值.label	默认值.defaultValue 值	默认值.defaultValue 类型	默认值.props	默 认值.props 解释
字符	string	'文字内容'	'文字内容'	String	-
数值	number	'数值'	10	Number	{ step: 1, min: 0, max: 144 }	用于配置数值编辑器的属性，比如 最小值、最大值、步长
Boolean	boolean	'开关'	false	Boolean	-
颜色	color	'文字颜色'	'#000000'	String	-
文字对齐	textAlign	'文字对齐'	'文字对齐'	String	-
简单选项列表	textOptions	'选项列表'	[ { label: 'label1', value: 'value1' } ]	Array	-
图片选择器	image	'图片'	''	String	-

安装

yarn add @luban-h5/plugin-common-props