首先，确保你已经安装了 Vant4：
npm install vant@next
然后，在你的 Vue 组件中引入 van-form 和其他相关的表单组件，比如 van-field：
<template>
<div>
<van-form @submit="onSubmit">
<van-field
v-model="formData.username"
name="username"
label="用户名"
placeholder="请输入用户名"
required
/>
<van-field
v-model="formData.password"
name="password"
label="密码"
type="password"
placeholder="请输入密码"
required
/>
<van-button type="primary" native-type="submit">提交</van-button>
</van-form>
</div>
</template>
<script>
import { ref } from 'vue';
import { Form, Field, Button } from 'vant';
import 'vant/lib/index.css'; // 引入样式
export default {
components: {
[Form.name]: Form,
[Field.name]: Field,
[Button.name]: Button,
},
setup() {
const formData = ref({
username: '',
password: '',
});
const onSubmit = () => {
// 在这里处理表单提交逻辑
console.log('表单提交', formData.value);
};
return {
formData,
onSubmit,
};
},
};
</script>
在上面的例子中，我们使用了 van-form 组件作为整个表单的容器，然后在其中嵌套了 van-field 组件，通过 v-model 指令将输入框的值与相应的表单数据进行双向绑定。
同时，我们使用了 required 属性表示这是一个必填项，并使用 @submit 事件监听表单提交。当点击提交按钮时，onSubmit 方法会被调用，你可以在这里处理表单的提交逻辑。
最后，别忘了引入样式文件，这样样式才能正确应用。
转载请注明出处：http://www.zyzy.cn/article/detail/5805/Vant