import { renderSlot, useSlots, watchEffect } from 'vue'; import { Col, Row } from 'vant'; import styleModule from './index.module.scss'; import type { VisualEditorComponent } from '@/visual-editor/visual-editor.utils'; import { createEditorInputProp, createEditorSelectProp } from '@/visual-editor/visual-editor.props'; import { useGlobalProperties } from '@/hooks/useGlobalProperties'; interface SlotItem { value: string; [prop: string]: any; } const slotsTemp = {} as any; const createSlots = (str: string): SlotItem => str.split(':').reduce( (prev, curr, index) => { prev[`slot${index}`] = { key: `slot${index}`, span: curr, children: [], }; return prev; }, { value: str }, ); export default { key: 'layout', moduleName: 'containerComponents', label: '布局容器', preview: () => ( span: 8 span: 8 span: 8 ), render: ({ props, styles, block, custom }) => { const slots = useSlots(); const { registerRef } = useGlobalProperties(); slotsTemp[block._vid] ??= {}; watchEffect(() => { if (Object.keys(props.slots || {}).length) { Object.keys(props.slots).forEach((key) => { if (slotsTemp[block._vid][key]?.children) { props.slots[key].children = slotsTemp[block._vid][key].children; } }); } }); return () => (
registerRef(el, block._vid)} {...custom} {...props} class={styleModule.vanRow} > {Object.values(Object.keys(props.slots).length ? props.slots : createSlots('12:12')) ?.filter((item) => typeof item !== 'string') .map((spanItem: SlotItem, spanIndex) => { slotsTemp[block._vid][`slot${spanIndex}`] = spanItem; return ( <> {renderSlot(slots, `slot${spanIndex}`)} ); })}
); }, resize: { height: true, width: true, }, props: { gutter: createEditorInputProp({ label: '列间隔' }), slots: createEditorSelectProp({ label: '列比例', options: [ { label: '24', value: createSlots('24') }, { label: '12:12', value: createSlots('12:12') }, { label: '6:18', value: createSlots('6:18') }, { label: '18:6', value: createSlots('18:6') }, { label: '8:8:8', value: createSlots('8:8:8') }, { label: '6:12:6', value: createSlots('6:12:6') }, { label: '6:6:6:6', value: createSlots('6:6:6:6') }, ], defaultValue: createSlots('12:12'), }), justify: createEditorSelectProp({ label: '主轴对齐方式', options: [ { label: '左对齐', value: 'start' }, { label: '居中排列', value: 'center' }, { label: '均匀对齐', value: 'space-around' }, { label: '两端对齐', value: 'space-between' }, { label: '右对齐', value: 'end' }, ], }), align: createEditorSelectProp({ label: '交叉轴对齐方式', options: [ { label: '顶部对齐', value: 'top' }, { label: '垂直居中', value: 'center' }, { label: '底部对齐', value: 'bottom' }, ], }), }, } as VisualEditorComponent;