diff --git a/packages/vue-generator/src/generator/vue/sfc/genSetupSFC.js b/packages/vue-generator/src/generator/vue/sfc/genSetupSFC.js index ff8ac1a536..d27797dba4 100644 --- a/packages/vue-generator/src/generator/vue/sfc/genSetupSFC.js +++ b/packages/vue-generator/src/generator/vue/sfc/genSetupSFC.js @@ -6,7 +6,8 @@ import { handleTinyGrid, handleTinyIcon, handleExpressionChildren, - validEmptyTemplateHook + validEmptyTemplateHook, + handleSlotParams } from './generateTemplate' import { generateStyleTag } from './generateStyle' import { @@ -213,6 +214,7 @@ export const genSFCWithDefaultPlugin = (schema, componentsMap, config = {}) => { const defaultComponentHooks = [handleComponentNameHook, handleTinyIcon] const defaultAttributeHook = [ + handleSlotParams, handleTinyGrid, handleJsxModelValueUpdate, handleConditionAttrHook, diff --git a/packages/vue-generator/src/generator/vue/sfc/generateTemplate.js b/packages/vue-generator/src/generator/vue/sfc/generateTemplate.js index 6a2820eeaa..d3f2d2f654 100644 --- a/packages/vue-generator/src/generator/vue/sfc/generateTemplate.js +++ b/packages/vue-generator/src/generator/vue/sfc/generateTemplate.js @@ -136,6 +136,34 @@ export const handleTinyGrid = (schemaData, globalHooks, config) => { }) } +/** + * 解决往插槽传参的场景。 + * 比如区块设置了插槽,需要往里面传数据,schema 协议会生成如下参数 + * { + * params: [{ name: "test", value: { type: "JSExpression", value: "this.state.arr" } }] + * } + * 需要将数组进行解析然后转换,才能进行后续正确出码, + * @param {*} schemaData + * @returns + */ +export const handleSlotParams = (schemaData) => { + const { componentName, props } = schemaData.schema + + if (componentName !== 'Slot' || !Array.isArray(props?.params)) { + return + } + + props.params.forEach((paramItem) => { + const { name, value } = paramItem || {} + + if (name && value) { + props[name] = value + } + }) + + delete props.params +} + export const handleExpressionChildren = (schemaData = {}, globalHooks, config) => { const { children, schema } = schemaData const type = schema?.children?.type diff --git a/packages/vue-generator/test/testcases/sfc/slotParams/block.schema.json b/packages/vue-generator/test/testcases/sfc/slotParams/block.schema.json new file mode 100644 index 0000000000..df79707482 --- /dev/null +++ b/packages/vue-generator/test/testcases/sfc/slotParams/block.schema.json @@ -0,0 +1,47 @@ +{ + "state": { + "personData": { + "name": "李华", + "age": "20", + "address": "china" + } + }, + "methods": {}, + "componentName": "Block", + "css": "", + "props": {}, + "lifeCycles": {}, + "children": [ + { + "componentName": "Text", + "id": "52535213", + "props": { + "text": "请开启插槽" + } + }, + { + "id": "42562b66", + "componentName": "div", + "props": {}, + "children": [ + { + "componentName": "Slot", + "id": "6153675d", + "props": { + "name": "test", + "params": [ + { + "name": "testData", + "value": { + "type": "JSExpression", + "value": "this.state.personData" + } + } + ] + } + } + ] + } + ], + "fileName": "BlockSlotParams" +} diff --git a/packages/vue-generator/test/testcases/sfc/slotParams/expected/slotParamsBlock.vue b/packages/vue-generator/test/testcases/sfc/slotParams/expected/slotParamsBlock.vue new file mode 100644 index 0000000000..d86979f72f --- /dev/null +++ b/packages/vue-generator/test/testcases/sfc/slotParams/expected/slotParamsBlock.vue @@ -0,0 +1,25 @@ + + + + diff --git a/packages/vue-generator/test/testcases/sfc/slotParams/expected/slotParamsPage.vue b/packages/vue-generator/test/testcases/sfc/slotParams/expected/slotParamsPage.vue new file mode 100644 index 0000000000..bfa219de2d --- /dev/null +++ b/packages/vue-generator/test/testcases/sfc/slotParams/expected/slotParamsPage.vue @@ -0,0 +1,27 @@ + + + + diff --git a/packages/vue-generator/test/testcases/sfc/slotParams/page.schema.json b/packages/vue-generator/test/testcases/sfc/slotParams/page.schema.json new file mode 100644 index 0000000000..316f5d6f14 --- /dev/null +++ b/packages/vue-generator/test/testcases/sfc/slotParams/page.schema.json @@ -0,0 +1,41 @@ +{ + "state": {}, + "methods": {}, + "componentName": "Page", + "css": "", + "props": {}, + "lifeCycles": {}, + "children": [ + { + "componentName": "BlockSlotParams", + "props": {}, + "id": "63623253", + "componentType": "Block", + "children": [ + { + "id": "54396632", + "componentName": "Template", + "props": { + "slot": { + "name": "test", + "params": ["testData"] + } + }, + "children": [ + { + "id": "5242615f", + "componentName": "Text", + "props": { + "text": { + "type": "JSExpression", + "value": "testData.name" + } + } + } + ] + } + ] + } + ], + "fileName": "slotParamsTest" +} diff --git a/packages/vue-generator/test/testcases/sfc/slotParams/slotParams.test.js b/packages/vue-generator/test/testcases/sfc/slotParams/slotParams.test.js new file mode 100644 index 0000000000..9d7efa124a --- /dev/null +++ b/packages/vue-generator/test/testcases/sfc/slotParams/slotParams.test.js @@ -0,0 +1,19 @@ +import { expect, test } from 'vitest' +import { genSFCWithDefaultPlugin } from '@/generator/vue/sfc' +import blockSchema from './block.schema.json' +import pageSchema from './page.schema.json' +import { formatCode } from '@/utils/formatCode' + +test('should generate slot and pass testData params', async () => { + const res = genSFCWithDefaultPlugin(blockSchema, []) + const formattedCode = formatCode(res, 'vue') + + await expect(formattedCode).toMatchFileSnapshot('./expected/slotParamsBlock.vue') +}) + +test('should generate slot params', async () => { + const res = genSFCWithDefaultPlugin(pageSchema, []) + const formattedCode = formatCode(res, 'vue') + + await expect(formattedCode).toMatchFileSnapshot('./expected/slotParamsPage.vue') +})