首先，确保你已经安装了 Vant4：
npm install vant@next
然后，在你的 Vue 组件中引入 van-search：
<template>
<div>
<van-search
v-model="keyword"
placeholder="请输入关键字"
@search="onSearch"
/>
</div>
</template>
<script>
import { ref } from 'vue';
import { Search } from 'vant';
import 'vant/lib/index.css'; // 引入样式
export default {
components: {
[Search.name]: Search,
},
setup() {
const keyword = ref('');
const onSearch = () => {
// 在这里处理搜索事件
console.log('搜索关键字', keyword.value);
};
return {
keyword,
onSearch,
};
},
};
</script>
在上面的例子中，我们使用了 van-search 组件，并通过 v-model 指令将搜索框中的关键字与一个 Vue 变量 keyword 进行双向绑定。
我们设置了 placeholder 属性来显示搜索框的占位符。监听了 @search 事件，当用户点击搜索按钮或按下回车键时触发，可以在这里处理搜索的逻辑。
你可以根据需要自定义 van-search 组件的样式和其他属性。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5812/Vant