首先，确保你已经安装了 Vant4：
npm install vant@next
然后，在你的 Vue 项目中，可以这样使用 ActionBar：
<template>
<van-action-bar>
<!-- 左侧返回按钮 -->
<van-action-bar-icon icon="arrow-left" @click="goBack" />
<!-- 中间标题 -->
<van-action-bar-title>Title</van-action-bar-title>
<!-- 右侧操作按钮 -->
<van-action-bar-icon icon="search" @click="handleSearch" />
<van-action-bar-icon icon="plus" @click="handleAdd" />
</van-action-bar>
</template>
<script>
export default {
methods: {
goBack() {
// 处理返回按钮点击事件
this.$router.back();
},
handleSearch() {
// 处理搜索按钮点击事件
console.log('Search clicked');
},
handleAdd() {
// 处理添加按钮点击事件
console.log('Add clicked');
}
}
};
</script>
<style>
/* 可以根据需求添加样式 */
</style>
在这个例子中，<van-action-bar> 是动作栏的容器，里面包含了左侧返回按钮、中间标题和右侧操作按钮。你可以根据自己的需求，通过修改图标和处理函数来定制动作栏的功能。
转载请注明出处：http://www.zyzy.cn/article/detail/5846/Vant