shalu-dashboard-ui/components/cusForm/src/CusFormItem.vue

<template>
  <FormItem :label="item.type !== 'divider' ? item.label : ''" :name="item.prop" :rules="item.rules">
    <template v-if="item.type === 'divider'">
      <Divider style="margin: 0">{{ item.label }}</Divider>
    </template>
    <template v-else-if="item.type === 'input'">
      <Input v-model:value="model" v-bind="item?.fieldProps"/>
    </template>
    <template v-else-if="item.type === 'select'">
      <Select v-model:value="model" v-bind="item?.fieldProps"></Select>
    </template>
    <template v-else-if="item.type === 'inputNumber'">
      <InputNumber v-model:value="model"  v-bind="item?.fieldProps" style="width: 100%"/>
    </template>
    <template v-else-if="item.type === 'image'">
      <Image v-model:value="model"  v-bind="item?.fieldProps"/>
    </template>
    <template v-else-if="item.type === 'checkboxGroup'">
      <CheckboxGroup v-model:value="model" v-bind="item?.fieldProps">
      </CheckboxGroup>
    </template>
    <template v-else-if="item.type === 'backgroundSelect'">
      <BackgroundSelect v-model:background="model"  v-bind="item?.fieldProps"/>
    </template>
    <template v-else-if="item.type === 'colorSelect'">
      <ColorSelect v-model:value="model"  v-bind="item?.fieldProps"/>
    </template>
    <template v-else-if="item.type === 'colorScheme'">
      <ColorScheme v-model:value="model"  v-bind="item?.fieldProps"/>
    </template>
    <template v-else-if="item.type === 'radioGroup'">
      <RadioGroup v-model:value="model" size="small" v-bind="item?.fieldProps">
      </RadioGroup>
    </template>
    <template v-else-if="item.type === 'position'">
      <Position v-model:value="model"  v-bind="item?.fieldProps"/>
    </template>
    <template v-else-if="item.type === 'fontStyle'">
      <FontStyle v-model:value="model"  v-bind="item?.fieldProps"/>
    </template>
    <template v-else-if="item.type === 'slider'">
      <FormItemRest>
        <CusSlider v-model:value="model"  v-bind="item?.fieldProps"/>
      </FormItemRest>
    </template>
    <!-- 提示 -->
    <template v-if="item.tip">
      <Tooltip :title="item.tip">
        <InfoCircleOutlined style="color: #666"/>
      </Tooltip>
    </template>
  </FormItem>
</template>

<script setup lang="ts">
import { IFormItem } from "./type";
import { defineProps, defineEmits, ref, watch } from "vue";
import {
  FormItem,
  FormItemRest,
  Input,
  Select,
  InputNumber,
  CheckboxGroup,
  Image,
  Divider,
  RadioGroup,
  Tooltip
} from "ant-design-vue";
import { InfoCircleOutlined } from "@ant-design/icons-vue";

import BackgroundSelect from "./BackgroundSelect.vue";
import ColorSelect from "./ColorSelect.vue";
import ColorScheme from "./ColorScheme.vue";
import Position from "./Position.vue";
import FontStyle from "./FontStyle.vue";
import CusSlider from "./CusSlider.vue";

const props = defineProps<{item: IFormItem, modelValue: any}>();
const emit = defineEmits(["update:modelValue"]);

const model = ref(props.modelValue);

watch(
  () => model.value,
  () => {
    emit("update:modelValue", model.value);
  }
)

</script>

<style lang="less" scoped>
:deep(.ant-divider-inner-text ){
  font-size: 12px;
  color: #666;
}
</style>