自定义组件切换规则
通过配置 switchType
,您可以限制或允许组件之间的切换规则,这样可以增强设计器的灵活性和可控性。该配置帮助用户根据业务需求自定义组件的切换行为。
数据结构
ts
//是否可以切换组件类型,或者可以相互切换的字段
type SwitchType = false | Array<string[]>;
配置自定义组件的切换规则。可以是 false
(禁用组件切换功能)或一个数组,数组中的每个子数组定义了一组可以相互切换的组件类型。
基本示例
允许 input
, textarea
, select
和 radio
之间的相互切换
vue
<template>
<fc-designer ref="designer" :config="config"/>
</template>
<script setup>
const config = {
switchType: [
['input', 'textarea', 'select', 'radio']
]
}
</script>
在特定条件下切换
只允许某些字段在特定条件下切换,例如,当用户选择一个特定的表单类型时,允许特定组件的切换
vue
<template>
<fc-designer ref="designer" :config="config"/>
</template>
<script setup>
const config = ref({
switchType: [
['input', 'textarea'],
]
})
function onConditionChange(condition) {
if (condition) {
config.value.switchType = [
['select', 'radio']
];
}
}
</script>