配置组件的参数(props)

通过配置项 props 可以为组件设置各种参数，调整组件的行为和外观。

生成一个可以同是选择日期和时间的日期组件

设置 props 来生成一个支持日期和时间选择的组件。以下示例展示了如何配置一个 DatePicker 组件来选择日期和时间。

评分

日期+时间

复制成功!

<template>
  <form-create :rule="rule" v-model:api="fApi" :option="options"/>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        }
      },
      rule: [
        {
          type: 'Rate',
          field: 'field1',
          title: '评分',
          props: {
            count: 10
          },
        },
        {
          type: 'datePicker',
          field: 'field2',
          title: '日期+时间',
          props: {
            showTime: true
          },
        },
      ]
    }

  }
}
</script>

组件的配置项可以在对应的 UI 框架的文档中查询，以下是 UI 框架的文档链接：

• element-plus 文档查看
• ant-design-vue 文档查看
• naive-ui 文档查看
• arco-design 文档查看
• t-design 文档查看

生成一个被禁用的 input 组件

通过 props 设置组件的禁用状态，可以创建一个不可编辑的 input 组件。以下示例展示了如何禁用 input 组件。

名称

复制成功!

<template>
  <form-create :rule="rule" v-model:api="fApi" :option="options"/>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      options: {
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        }
      },
      rule: [
        {
          type: 'input',
          field: 'input',
          title: '名称',
          value: '',
          props: {
            disabled: true,
            placeholder: '请输入名称',
          },
        }
      ]
    }

  }
}
</script>

全局配置组件参数默认值

可以通过全局配置来设置组件的默认参数，确保所有生成的组件遵循统一的配置。以下示例展示了如何为所有组件设置默认值。

名称1

名称2

评分1

评分2

复制成功!

<template>
  <form-create :rule="rule" v-model:api="fApi" :option="options"/>
</template>

<script>
export default {
  data() {
    return {
      fApi: {},
      options: {
        global: {
          input: {
            props: {
              placeholder: '请输入内容',
            }
          },
          rate: {
            props: {
              count: 10,
            }
          },
        },
        onSubmit: (formData) => {
          alert(JSON.stringify(formData))
        }
      },
      rule: [
        {
          type: 'input',
          field: 'field1',
          title: '名称1',
          value: '',
          props: {},
        },
        {
          type: 'input',
          field: 'field2',
          title: '名称2',
          value: '',
          props: {},
        },
        {
          type: 'rate',
          field: 'field3',
          title: '评分1',
          props: {},
        },
        {
          type: 'rate',
          field: 'field4',
          title: '评分2',
          props: {},
        },
      ]
    }

  }
}
</script>