Form 表单

表单包含 输入框, 单选框, 下拉选择, 多选框 等用户输入的组件

邮箱

密码

同意

区域

form value:

{
  "email": "",
  "password": "",
  "confirmPwd": "",
  "agreement": false,
  "zone": ""
}

Form 下拉菜单

这是 Form 基础例子

<script setup lang="ts">
import { reactive, ref } from 'vue'

const formRef = ref()
const model = reactive({
  email: '',
  password: '',
  confirmPwd: '',
  agreement: false,
  zone: '',
})
const options = [
  { label: 'zone 1', value: 'one' },
  { label: 'zone 2', value: 'two' },
  { label: 'zone 3', value: 'three' },
]
async function submit() {
  // eslint-disable-next-line no-alert
  alert('submitted!')
}
function reset() {
  formRef.value.resetFields()
}
</script>

<template>
  <NpForm ref="formRef" :model="model">
    <NpFormItem prop="email" label="邮箱">
      <NpInput v-model="model.email" />
    </NpFormItem>
    <NpFormItem prop="password" label="密码">
      <NpInput v-model="model.password" type="password" />
    </NpFormItem>
    <NpFormItem prop="agreement" label="同意">
      <NpSwitch v-model="model.agreement" />
    </NpFormItem>
    <NpFormItem prop="zone" label="区域">
      <NpSelect :key="model.zone" v-model="model.zone" :options="options" />
    </NpFormItem>
    <NpFormItem>
      <NpButton type="primary" @click.prevent="submit">
        Submit
      </NpButton>
      <NpButton @click.prevent="reset">
        Reset
      </NpButton>
    </NpFormItem>
  </NpForm>

  <p>
    form value:
    <pre>{{ model }}</pre>
  </p>
</template>

原生输入框

邮箱

密码

密码

同意

区域

form value:

{
  "name": "",
  "email": "",
  "password": "",
  "confirmPwd": "",
  "agreement": false,
  "zone": ""
}

Form 下拉菜单

这是 Form 基础例子

<script setup lang="ts">
import { reactive, ref } from 'vue'

const formRef = ref()
const model = reactive({
  name: '',
  email: '',
  password: '',
  confirmPwd: '',
  agreement: false,
  zone: '',
})

const options = [
  { label: 'zone 1', value: 'one', green: true },
  { label: 'zone 2', value: 'two', green: true },
  { label: 'zone 3', value: 'three', disabled: true },
]

const rules = {
  name: [
    { type: 'string', required: true, trigger: 'blur' },
    { min: 3, max: 5, message: '长度3-5', trigger: 'blur' },
  ],
  email: [{ type: 'email', required: true, trigger: 'blur' }],
  password: [
    { type: 'string', required: true, trigger: 'blur' },
    { min: 3, max: 5, message: '长度3-5', trigger: 'blur' },
  ],
  confirmPwd: [
    { type: 'string', required: true, trigger: 'blur' },
    { validator: (_: any, value: string) => value === model.password, trigger: 'blur', message: '两个密码必须一致' },
  ],
  agreement: [{ type: 'enum', required: true, enum: [true], message: '请同意协议' }],
  zone: [{ type: 'string', required: true, trigger: 'change' }],
}

async function submit() {
  try {
    await formRef.value.validate()
    console.log('passed!')
  } catch (e) {
    console.log('the promise', e)
  }
}

function reset() {
  formRef.value.resetFields()
}
</script>

<template>
  <NpForm ref="formRef" class="form-demo" :model="model" :rules="rules">
    <NpFormItem v-slot="{ validate }" prop="name" label="原生输入框">
      <input v-model="model.name" class="inp" @blur="validate('blur')" @input="validate('input')">
    </NpFormItem>
    <NpFormItem prop="email" label="邮箱">
      <NpInput v-model="model.email" green />
    </NpFormItem>
    <NpFormItem prop="password" label="密码">
      <NpInput v-model="model.password" green type="password" />
    </NpFormItem>
    <NpFormItem prop="confirmPwd" label="密码">
      <NpInput v-model="model.confirmPwd" green type="password" />
    </NpFormItem>
    <NpFormItem prop="agreement" label="同意">
      <NpSwitch v-model="model.agreement" green />
    </NpFormItem>
    <NpFormItem prop="zone" label="区域">
      <NpSelect v-model="model.zone" green :options="options" />
    </NpFormItem>
    <NpFormItem>
      <NpButton type="green" @click.prevent="submit">
        Submit
      </NpButton>
      <NpButton type="green" plain @click.prevent="reset">
        Reset
      </NpButton>
    </NpFormItem>
  </NpForm>

  <p>
    form value:
    <pre>{{ model }}</pre>
  </p>
</template>

<style scoped>
.form-demo .inp {
  border: 1px solid #41d1ff;
}
</style>