<script lang="ts" setup>
|
import { useDynamic } from '../hooks/useDynamic';
|
import DataProperties from './components/DataProperties.vue';
|
|
defineOptions({ inheritAttrs: false });
|
const props = defineProps(['activeData', 'dicOptions']);
|
const { showType, sizeOptions, optionTypeOptions } = useDynamic(props.activeData);
|
const directionOptions = [
|
{ id: 'horizontal', fullName: '水平排列' },
|
{ id: 'vertical', fullName: '垂直排列' },
|
];
|
</script>
|
<template>
|
<a-form-item label="默认值">
|
<jnpf-select
|
v-model:value="activeData.__config__.defaultValue"
|
placeholder="请选择"
|
:options="activeData.options"
|
:field-names="activeData.props"
|
allow-clear />
|
</a-form-item>
|
<a-form-item label="排列方式">
|
<jnpf-radio v-model:value="activeData.direction" :options="directionOptions" option-type="button" button-style="solid" />
|
</a-form-item>
|
<DataProperties :active-data="activeData" :dic-options="dicOptions" />
|
<template v-if="showType === 'pc'">
|
<a-form-item label="选项样式">
|
<jnpf-radio v-model:value="activeData.optionType" :options="optionTypeOptions" option-type="button" button-style="solid" />
|
</a-form-item>
|
<a-form-item v-if="activeData.optionType === 'button'" label="组件尺寸">
|
<jnpf-radio v-model:value="activeData.size" :options="sizeOptions" option-type="button" button-style="solid" />
|
</a-form-item>
|
</template>
|
</template>
|
