<!--
|
* @Description: 右侧属性配置面板
|
-->
|
<template>
|
<div>
|
<Tabs v-model:activeKey="formConfig.activeKey" :tabBarStyle="{ margin: 0 }">
|
<TabPane :key="1" tab="表单">
|
<FormProps />
|
</TabPane>
|
<TabPane :key="2" tab="控件">
|
<FormItemProps />
|
</TabPane>
|
<TabPane :key="3" tab="栅格">
|
<ComponentColumnProps />
|
</TabPane>
|
<TabPane :key="4" tab="组件">
|
<slot v-if="slotProps" :name="slotProps.component + 'Props'"></slot>
|
<ComponentProps v-else />
|
</TabPane>
|
</Tabs>
|
</div>
|
</template>
|
<script lang="ts">
|
import { computed, defineComponent } from 'vue';
|
import FormProps from '../components/FormProps.vue';
|
import FormItemProps from '../components/FormItemProps.vue';
|
import ComponentProps from '../components/ComponentProps.vue';
|
import ComponentColumnProps from '../components/FormItemColumnProps.vue';
|
import { useFormDesignState } from '../../../hooks/useFormDesignState';
|
import { customComponents } from '../../../core/formItemConfig';
|
import { TabPane, Tabs } from 'ant-design-vue';
|
|
type ChangeTabKey = 1 | 2;
|
export interface IPropsPanel {
|
changeTab: (key: ChangeTabKey) => void;
|
}
|
export default defineComponent({
|
name: 'PropsPanel',
|
components: {
|
FormProps,
|
FormItemProps,
|
ComponentProps,
|
ComponentColumnProps,
|
Tabs,
|
TabPane,
|
},
|
setup() {
|
const { formConfig } = useFormDesignState();
|
const slotProps = computed(() => {
|
return customComponents.find(
|
(item) => item.component === formConfig.value.currentItem?.component,
|
);
|
});
|
return { formConfig, customComponents, slotProps };
|
},
|
});
|
</script>
|
|
<style lang="less" scoped>
|
@import url('../styles/variable.less');
|
|
:deep(.ant-tabs) {
|
box-sizing: border-box;
|
|
form {
|
width: 100%;
|
height: 85vh;
|
margin-right: 10px;
|
overflow: hidden auto;
|
}
|
|
.hint-box {
|
margin-top: 200px;
|
}
|
|
.ant-form-item,
|
.ant-slider-with-marks {
|
margin-right: 20px;
|
margin-bottom: 0;
|
margin-left: 10px;
|
}
|
|
.ant-form-item {
|
// width: 100%;
|
margin-bottom: 0;
|
|
.ant-form-item-label {
|
line-height: 2;
|
vertical-align: text-top;
|
}
|
}
|
|
.ant-input-number {
|
width: 100%;
|
}
|
}
|
</style>
|
