You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
3.8 KiB
101 lines
3.8 KiB
/*
|
|
* @Author: 卜启缘
|
|
* @Date: 2021-06-01 09:45:21
|
|
* @LastEditTime: 2021-06-22 23:08:50
|
|
* @LastEditors: 卜启缘
|
|
* @Description: '表单项类型 - 步进器
|
|
* @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\stepper\index.tsx
|
|
*/
|
|
import { Field, Stepper } from 'vant'
|
|
import { VisualEditorComponent } from '@/visual-editor/visual-editor.utils'
|
|
import { createFieldProps } from './createFieldProps'
|
|
import { useGlobalProperties } from '@/hooks/useGlobalProperties'
|
|
import {
|
|
createEditorInputNumberProp,
|
|
createEditorInputProp,
|
|
createEditorSwitchProp,
|
|
createEditorSelectProp
|
|
} from '@/visual-editor/visual-editor.props'
|
|
|
|
export default {
|
|
key: 'stepper',
|
|
moduleName: 'baseWidgets',
|
|
label: '表单项类型 - 步进器',
|
|
preview: () => (
|
|
<Field
|
|
name="stepper"
|
|
label="步进器"
|
|
labelWidth={50}
|
|
v-slots={{ input: () => <Stepper modelValue={3} /> }}
|
|
></Field>
|
|
),
|
|
render: ({ size, block, props }) => {
|
|
const { registerRef } = useGlobalProperties()
|
|
|
|
return (
|
|
<Field
|
|
{...props}
|
|
modelValue={''}
|
|
style={{
|
|
width: size.width ? `${size.width}px` : null
|
|
}}
|
|
v-slots={{
|
|
input: () => (
|
|
<Stepper
|
|
ref={(el) => registerRef(el, block._vid)}
|
|
{...props}
|
|
v-model={props.modelValue}
|
|
></Stepper>
|
|
)
|
|
}}
|
|
/>
|
|
)
|
|
},
|
|
props: {
|
|
modelValue: createEditorInputNumberProp({ label: '默认值', defaultValue: 0 }),
|
|
name: createEditorInputProp({ label: '字段名', defaultValue: 'stepper' }),
|
|
label: createEditorInputProp({ label: '输入框左侧文本', defaultValue: '步进器' }),
|
|
min: createEditorInputNumberProp({ label: '最小值', defaultValue: 0 }),
|
|
max: createEditorInputNumberProp({ label: '最大值' }),
|
|
...createFieldProps(),
|
|
allowEmpty: createEditorSwitchProp({ label: '是否允许输入的值为空', defaultValue: false }),
|
|
buttonSize: createEditorInputProp({
|
|
label: '按钮大小以及输入框高度,默认单位为 px',
|
|
defaultValue: '28px'
|
|
}),
|
|
decimalLength: createEditorInputProp({ label: '固定显示的小数位数', defaultValue: '' }),
|
|
defaultValue: createEditorInputProp({
|
|
label: '初始值,当 v-model 为空时生效',
|
|
defaultValue: '1'
|
|
}),
|
|
disableInput: createEditorSwitchProp({ label: '是否禁用输入框', defaultValue: false }),
|
|
disableMinus: createEditorSwitchProp({ label: '是否禁用减少按钮', defaultValue: false }),
|
|
disablePlus: createEditorSwitchProp({ label: '是否禁用增加按钮', defaultValue: false }),
|
|
disabled: createEditorSwitchProp({ label: '是否禁用步进器', defaultValue: false }),
|
|
inputWidth: createEditorInputProp({ label: '输入框宽度,默认单位为 px', defaultValue: '32px' }),
|
|
integer: createEditorSwitchProp({ label: '是否只允许输入整数', defaultValue: false }),
|
|
longPress: createEditorSwitchProp({ label: '是否开启长按手势', defaultValue: true }),
|
|
placeholder: createEditorInputProp({ label: '输入框占位提示文字', defaultValue: '' }),
|
|
showInput: createEditorSwitchProp({ label: '是否显示输入框', defaultValue: true }),
|
|
showMinus: createEditorSwitchProp({ label: '是否显示减少按钮', defaultValue: true }),
|
|
showPlus: createEditorSwitchProp({ label: '是否显示增加按钮', defaultValue: true }),
|
|
step: createEditorInputProp({ label: '步长,每次点击时改变的值', defaultValue: '1' }),
|
|
theme: createEditorSelectProp({
|
|
label: '样式风格',
|
|
options: [
|
|
{
|
|
label: '默认',
|
|
value: ''
|
|
},
|
|
{ label: '圆角风格', value: 'round' }
|
|
],
|
|
defaultValue: ''
|
|
})
|
|
},
|
|
resize: {
|
|
width: true
|
|
},
|
|
model: {
|
|
default: '绑定字段'
|
|
}
|
|
} as VisualEditorComponent
|
|
|