mirror of
https://github.com/Tencent/tmagic-editor.git
synced 2026-06-04 10:58:33 +08:00
feat(form): fieldset legend 支持函数动态生成标题
This commit is contained in:
parent
8612311db1
commit
35fc394199
@ -135,6 +135,18 @@
|
|||||||
}]
|
}]
|
||||||
}]"></demo-block>
|
}]"></demo-block>
|
||||||
|
|
||||||
|
`legend` 除了支持字符串,也支持函数,函数返回值作为标题展示,可根据表单数据动态生成:
|
||||||
|
|
||||||
|
<demo-block type="form" :config="[{
|
||||||
|
type: 'fieldset',
|
||||||
|
labelWidth: '100px',
|
||||||
|
legend: (mForm, { formValue }) => `当前值:${formValue.text || '空'}`,
|
||||||
|
items: [{
|
||||||
|
name: 'text',
|
||||||
|
text: '配置1',
|
||||||
|
}]
|
||||||
|
}]"></demo-block>
|
||||||
|
|
||||||
### panel
|
### panel
|
||||||
|
|
||||||
<demo-block type="form" :config="[{
|
<demo-block type="form" :config="[{
|
||||||
|
|||||||
@ -754,7 +754,7 @@ export interface FieldsetConfig<T = never> extends FormItem, ContainerCommonConf
|
|||||||
falseValue?: string | number;
|
falseValue?: string | number;
|
||||||
};
|
};
|
||||||
expand?: boolean;
|
expand?: boolean;
|
||||||
legend?: string;
|
legend?: string | FilterFunction<string>;
|
||||||
schematic?: string;
|
schematic?: string;
|
||||||
}
|
}
|
||||||
// #endregion FieldsetConfig
|
// #endregion FieldsetConfig
|
||||||
|
|||||||
@ -7,11 +7,11 @@
|
|||||||
:true-value="checkboxTrueValue"
|
:true-value="checkboxTrueValue"
|
||||||
:false-value="checkboxFalseValue"
|
:false-value="checkboxFalseValue"
|
||||||
@update:modelValue="valueChangeHandler"
|
@update:modelValue="valueChangeHandler"
|
||||||
><span v-html="config.legend"></span><span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span
|
><span v-html="legend"></span><span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span
|
||||||
></TMagicCheckbox>
|
></TMagicCheckbox>
|
||||||
</component>
|
</component>
|
||||||
<legend v-else>
|
<legend v-else>
|
||||||
<span v-html="config.legend"></span>
|
<span v-html="legend"></span>
|
||||||
<span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span>
|
<span v-if="config.extra" v-html="config.extra" class="m-form-tip"></span>
|
||||||
</legend>
|
</legend>
|
||||||
|
|
||||||
@ -63,6 +63,7 @@ import { computed, inject } from 'vue';
|
|||||||
import { TMagicCheckbox } from '@tmagic/design';
|
import { TMagicCheckbox } from '@tmagic/design';
|
||||||
|
|
||||||
import { ContainerChangeEventData, FieldsetConfig, FormState } from '../schema';
|
import { ContainerChangeEventData, FieldsetConfig, FormState } from '../schema';
|
||||||
|
import { filterFunction } from '../utils/form';
|
||||||
|
|
||||||
import Container from './Container.vue';
|
import Container from './Container.vue';
|
||||||
|
|
||||||
@ -99,6 +100,8 @@ const mForm = inject<FormState | undefined>('mForm');
|
|||||||
|
|
||||||
const name = computed(() => props.config.name || '');
|
const name = computed(() => props.config.name || '');
|
||||||
|
|
||||||
|
const legend = computed(() => filterFunction<string>(mForm, props.config.legend, props));
|
||||||
|
|
||||||
const checkboxName = computed(() => {
|
const checkboxName = computed(() => {
|
||||||
if (typeof props.config.checkbox === 'object' && typeof props.config.checkbox.name === 'string') {
|
if (typeof props.config.checkbox === 'object' && typeof props.config.checkbox.name === 'string') {
|
||||||
return props.config.checkbox.name;
|
return props.config.checkbox.name;
|
||||||
|
|||||||
@ -58,6 +58,22 @@ describe('Panel container', () => {
|
|||||||
);
|
);
|
||||||
await nextTick();
|
await nextTick();
|
||||||
expect(wrapper.exists()).toBe(true);
|
expect(wrapper.exists()).toBe(true);
|
||||||
|
expect(wrapper.find('legend').text()).toContain('fs');
|
||||||
|
});
|
||||||
|
|
||||||
|
test('fieldset legend 支持函数', async () => {
|
||||||
|
const wrapper = mountForm(
|
||||||
|
[
|
||||||
|
{
|
||||||
|
type: 'fieldset',
|
||||||
|
legend: (mForm: any, { formValue }: any) => `legend-${formValue.text}`,
|
||||||
|
items: [{ name: 'text', type: 'text', text: 'text' }],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
{ text: 'fn' },
|
||||||
|
);
|
||||||
|
await nextTick();
|
||||||
|
expect(wrapper.find('legend').text()).toContain('legend-fn');
|
||||||
});
|
});
|
||||||
|
|
||||||
test('flex-layout 容器渲染', async () => {
|
test('flex-layout 容器渲染', async () => {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user