Input

• 示例
  • 基础 Input
  • 表单校验
• Input 的 formItem 配置

示例

基础 Input

input

textarea

<script setup>
import { reactive } from 'vue'

let dynamicForm = reactive({
  form: [
    {
      name: 'input',
      label: 'input',
      value: null,
      element: 'input',
      attr: {
        placeholder: '这是一个input',
      },
    },
    {
      name: 'textarea',
      label: 'textarea',
      value: null,
      element: 'input',
      elementType: 'textarea',
      attr: {
        placeholder: '这是一个textarea',
        autosize: { minRows: 4, maxRows: 6 },
      },
    },
  ],
})

function submit(value) {
  console.log(value)
}
</script>

<template>
  <ins-form :dynamicForm="dynamicForm" @save="submit" />
</template>

显示代码

复制代码片段

表单校验

input

textarea

<script setup>
import { reactive } from 'vue'

let dynamicForm = reactive({
  form: [
    {
      name: 'input',
      label: 'input',
      value: null,
      element: 'input',
      attr: {
        placeholder: '这是一个input',
      },
      rules: [{ required: true, trigger: 'change' }],
    },
    {
      name: 'textarea',
      label: 'textarea',
      value: null,
      element: 'input',
      elementType: 'textarea',
      attr: {
        placeholder: '这是一个textarea',
        autosize: { minRows: 4, maxRows: 6 },
      },
      rules: [{ required: true, trigger: 'change' }],
    },
  ],
})

function submit(value) {
  console.log(value)
}
</script>

<template>
  <ins-form :dynamicForm="dynamicForm" @save="submit" />
</template>

显示代码

复制代码片段

Input 的 formItem 配置

属性	说明	可选值	默认值
elementType	二级类型	input、textarea	input

🎉 其他参考通用配置