@boom_pk/lowcode-barcode-component
Version:
阿里低代码引擎条形码组件
251 lines • 5.81 kB
JavaScript
export var BarcodeComponentMeta = {
componentName: 'BarcodeComponent',
title: '条形码',
docUrl: '',
screenshot: '',
devMode: 'proCode',
npm: {
"package": '@boom_pk/lowcode-barcode-component',
version: '1.0.1',
exportName: 'BarcodeComponent',
destructuring: false,
subName: ''
},
configure: {
props: [{
title: '基础属性',
display: 'block',
type: 'group',
items: [{
name: 'value',
title: '条形码内容',
setter: {
componentName: 'StringSetter',
props: {
placeholder: '请输入条形码内容'
}
},
defaultValue: 'SAMPLE123'
}, {
name: 'format',
title: '条形码格式',
setter: {
componentName: 'SelectSetter',
props: {
options: [{
label: 'CODE128',
value: 'CODE128'
}, {
label: 'CODE39',
value: 'CODE39'
}, {
label: 'EAN13',
value: 'EAN13'
}, {
label: 'EAN8',
value: 'EAN8'
}, {
label: 'UPC',
value: 'UPC'
}, {
label: 'CODE128A',
value: 'CODE128A'
}, {
label: 'CODE128B',
value: 'CODE128B'
}, {
label: 'CODE128C',
value: 'CODE128C'
}]
}
},
defaultValue: 'CODE128'
}]
}, {
title: '尺寸设置',
display: 'block',
type: 'group',
items: [{
name: 'width',
title: '条宽度',
setter: {
componentName: 'NumberSetter',
props: {
min: 1,
max: 10,
step: 0.5
}
},
defaultValue: 2
}, {
name: 'height',
title: '条高度',
setter: {
componentName: 'NumberSetter',
props: {
min: 20,
max: 300
}
},
defaultValue: 100
}]
}, {
title: '文本设置',
display: 'block',
type: 'group',
items: [{
name: 'displayValue',
title: '显示文本',
setter: 'BoolSetter',
defaultValue: true
}, {
name: 'fontSize',
title: '字体大小',
setter: {
componentName: 'NumberSetter',
props: {
min: 8,
max: 40
}
},
defaultValue: 20,
condition: {
type: 'JSFunction',
value: 'target => target.getProps().getPropValue("displayValue")'
}
}, {
name: 'textAlign',
title: '文本对齐',
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [{
label: '左对齐',
value: 'left'
}, {
label: '居中',
value: 'center'
}, {
label: '右对齐',
value: 'right'
}]
}
},
defaultValue: 'center',
condition: {
type: 'JSFunction',
value: 'target => target.getProps().getPropValue("displayValue")'
}
}, {
name: 'textPosition',
title: '文本位置',
setter: {
componentName: 'RadioGroupSetter',
props: {
options: [{
label: '顶部',
value: 'top'
}, {
label: '底部',
value: 'bottom'
}]
}
},
defaultValue: 'bottom',
condition: {
type: 'JSFunction',
value: 'target => target.getProps().getPropValue("displayValue")'
}
}]
}, {
title: '样式设置',
display: 'block',
type: 'group',
items: [{
name: 'background',
title: '背景色',
setter: {
componentName: 'ColorSetter'
},
defaultValue: '#ffffff'
}, {
name: 'lineColor',
title: '条形码颜色',
setter: {
componentName: 'ColorSetter'
},
defaultValue: '#000000'
}]
}, {
title: '边距设置',
display: 'block',
type: 'group',
items: [{
name: 'margin',
title: '整体边距',
setter: {
componentName: 'NumberSetter',
props: {
min: 0,
max: 50
}
},
defaultValue: 10
}, {
name: 'marginTop',
title: '上边距',
setter: {
componentName: 'NumberSetter',
props: {
min: 0,
max: 50
}
},
defaultValue: 10
}, {
name: 'marginBottom',
title: '下边距',
setter: {
componentName: 'NumberSetter',
props: {
min: 0,
max: 50
}
},
defaultValue: 10
}, {
name: 'marginLeft',
title: '左边距',
setter: {
componentName: 'NumberSetter',
props: {
min: 0,
max: 50
}
},
defaultValue: 10
}, {
name: 'marginRight',
title: '右边距',
setter: {
componentName: 'NumberSetter',
props: {
min: 0,
max: 50
}
},
defaultValue: 10
}]
}],
supports: {
style: true,
events: [{
name: 'onClick',
template: "onClick(event, ${extParams}) {\n // 点击条形码\n console.log('条形码被点击', event);\n}"
}]
},
component: {
isContainer: false
}
}
};