chore(form): split demo (#2892)

packages/nutui-taro-demo/src/dentry/pages/form/basic.vue

@@ -0,0 +1,29 @@
+<template>
+  <nut-form>
+    <nut-form-item label="姓名">
+      <nut-input v-model="formData.name" placeholder="请输入姓名" type="text" />
+    </nut-form-item>
+    <nut-form-item label="年龄">
+      <nut-input v-model="formData.age" placeholder="请输入年龄" type="text" />
+    </nut-form-item>
+    <nut-form-item label="联系电话">
+      <nut-input v-model="formData.tel" placeholder="请输入联系电话" type="text" />
+    </nut-form-item>
+    <nut-form-item label="地址">
+      <nut-input v-model="formData.addr" placeholder="请输入地址" type="text" />
+    </nut-form-item>
+    <nut-form-item label="备注">
+      <nut-textarea v-model="formData.info" placeholder="请输入备注" type="text" />
+    </nut-form-item>
+  </nut-form>
+</template>
+<script setup>
+import { ref } from 'vue';
+const formData = ref({
+  name: '',
+  age: '',
+  tel: '',
+  addr: '',
+  info: ''
+});
+</script>

packages/nutui-taro-demo/src/dentry/pages/form/dynamic.vue

@@ -0,0 +1,57 @@
+<template>
+  <nut-form ref="formRef" :model-value="formData">
+    <nut-form-item label="姓名" prop="name" required :rules="[{ required: true, message: '请填写姓名' }]">
+      <nut-input v-model="formData.name" placeholder="请输入姓名" type="text" />
+    </nut-form-item>
+    <nut-form-item
+      v-for="(item, index) in formData.tels"
+      :key="item.key"
+      :label="'字段 ' + index"
+      :prop="'tels.' + index + '.value'"
+      required
+      :rules="[{ required: true, message: '请填写字段 ' + index }]"
+    >
+      <nut-input v-model="item.value" :placeholder="'请输入字段 ' + index" type="text" />
+    </nut-form-item>
+    <nut-space style="margin: 10px">
+      <nut-button size="small" @click="add">添加</nut-button>
+      <nut-button size="small" @click="remove">删除</nut-button>
+      <nut-button size="small" type="primary" @click="submit">提交</nut-button>
+      <nut-button size="small" @click="reset">重置提示状态</nut-button>
+    </nut-space>
+  </nut-form>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const formData = ref({
+  name: '',
+  tels: []
+});
+const formRef = ref(null);
+
+const add = () => {
+  formData.value.tels.push({
+    key: Date.now(),
+    value: ''
+  });
+};
+
+const remove = () => {
+  formData.value.tels.pop();
+};
+
+const submit = () => {
+  formRef.value?.validate().then(({ valid, errors }) => {
+    if (valid) {
+      console.log('success:', formData.value);
+    } else {
+      console.warn('error:', errors);
+    }
+  });
+};
+
+const reset = () => {
+  formRef.value?.reset();
+};
+</script>