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.
 
 
 
 
 
 

112 lines
3.1 KiB

/*
* @Author: 卜启缘
* @Date: 2021-06-01 09:45:21
* @LastEditTime: 2021-07-04 16:50:19
* @LastEditors: 卜启缘
* @Description: 表单项类型 - 复选框
* @FilePath: \vite-vue3-lowcode\src\packages\base-widgets\checkbox\index.tsx
*/
import { reactive } from 'vue'
import { Field, Checkbox, CheckboxGroup } from 'vant'
import type { VisualEditorComponent } from '@/visual-editor/visual-editor.utils'
import { createFieldProps } from './createFieldProps'
import { useGlobalProperties } from '@/hooks/useGlobalProperties'
import {
createEditorInputProp,
createEditorSelectProp,
createEditorCrossSortableProp,
createEditorModelBindProp
} from '@/visual-editor/visual-editor.props'
export default {
key: 'checkbox',
moduleName: 'baseWidgets',
label: '表单项类型 - 复选框',
preview: () => (
<CheckboxGroup modelValue={['1']} direction={'horizontal'}>
<Checkbox name="1" shape="square">
one
</Checkbox>
<Checkbox name="2" shape="square">
two
</Checkbox>
</CheckboxGroup>
),
render: ({ size, block, props }) => {
const { registerRef } = useGlobalProperties()
const state = reactive({
checkList:
typeof props.modelValue === 'string' ? props.modelValue.split(',') : props.modelValue
})
return (
<Field
{...props}
modelValue={''}
style={{
width: size.width ? `${size.width}px` : null
}}
name={Array.isArray(props.name) ? [...props.name].pop() : props.name}
v-slots={{
input: () => (
<CheckboxGroup
ref={(el) => registerRef(el, block._vid)}
{...props}
v-model={state.checkList}
>
{props.options?.map((item) => (
<Checkbox name={item.value} style={{ marginBottom: '5px' }} shape="square">
{item.label}
</Checkbox>
))}
</CheckboxGroup>
)
}}
/>
)
},
props: {
modelValue: createEditorInputProp({
label: '默认值',
defaultValue: []
}),
name: createEditorModelBindProp({ label: '字段绑定', defaultValue: '' }),
label: createEditorInputProp({ label: '输入框左侧文本', defaultValue: '复选框' }),
options: createEditorCrossSortableProp({
label: '默认选项',
labelPosition: 'top',
multiple: true,
defaultValue: [
{ label: '胡萝卜', value: 'carrot' },
{ label: '白菜', value: 'cabbage' },
{ label: '猪', value: 'pig' }
]
}),
direction: createEditorSelectProp({
label: '排列方向',
options: [
{
label: '水平',
value: 'horizontal'
},
{
label: '垂直',
value: 'vertical'
}
],
defaultValue: 'horizontal'
}),
...createFieldProps()
},
events: [
{ label: '当绑定值变化时触发的事件', value: 'change' },
{ label: '点击复选框时触发', value: 'click' }
],
resize: {
width: true
},
model: {
default: '绑定字段'
}
} as VisualEditorComponent