首先，确保你已经安装了 Vant4：
npm install vant@next
然后，在你的 Vue 组件中引入 van-field：
<template>
<div>
<van-field
v-model="inputValue"
label="输入框"
placeholder="请输入内容"
clearable
/>
</div>
</template>
<script>
import { ref } from 'vue';
import { Field } from 'vant';
import 'vant/lib/index.css'; // 引入样式
export default {
components: {
[Field.name]: Field,
},
setup() {
const inputValue = ref('');
return {
inputValue,
};
},
};
</script>
在上面的例子中，我们使用了 van-field 组件，并通过 v-model 指令将输入框的值与一个 Vue 变量 inputValue 进行双向绑定。
我们设置了一些常见的属性，如 label 表示输入框的标签，placeholder 表示占位符，以及 clearable 表示是否显示清空按钮。
最后，别忘了引入样式文件，这样样式才能正确应用。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5804/Vant