[已解决]vant4使用组件van-action-bar不显示

58869333

兄弟们这什么办

最佳答案

月排行榜 / 总排行榜

isdkz

2023-3-10 11:02:25

如果你在使用 vant4 的组件 van-action-bar，但是无法显示，可以按照以下步骤进行排查：

确认是否正确引入了 vant4 组件库，可以在项目的入口文件中引入 vant4 的样式和组件库：

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

确认组件的使用方式是否正确，例如：

<template>
  <van-action-bar>
    <van-action-bar-button icon="search" text="搜索" />
    <van-action-bar-button icon="friends-o" text="好友" />
    <van-action-bar-button icon="setting-o" text="设置" />
  </van-action-bar>
</template>

检查组件的父元素是否设置了合适的样式，例如：

<style>
  .van-action-bar__button {
    width: 33.33333%;
  }
</style>

以上是排查可能导致组件不显示的问题的一些步骤，如果问题仍然存在，

可以进一步排查代码逻辑或查看控制台中的错误信息。

跳转到最佳答案楼层

isdkz

如果你在使用 vant4 的组件 van-action-bar，但是无法显示，可以按照以下步骤进行排查：

确认是否正确引入了 vant4 组件库，可以在项目的入口文件中引入 vant4 的样式和组件库：

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

确认组件的使用方式是否正确，例如：

<template>
  <van-action-bar>
    <van-action-bar-button icon="search" text="搜索" />
    <van-action-bar-button icon="friends-o" text="好友" />
    <van-action-bar-button icon="setting-o" text="设置" />
  </van-action-bar>
</template>

检查组件的父元素是否设置了合适的样式，例如：

<style>
  .van-action-bar__button {
    width: 33.33333%;
  }
</style>

以上是排查可能导致组件不显示的问题的一些步骤，如果问题仍然存在，

可以进一步排查代码逻辑或查看控制台中的错误信息。

58869333

这为什么别的都显示，就这个不显示

58869333

而且这个文档没有别的介绍，说这个需要引用什么

58869333

我知道怎么解决了，和下面的tablebar冲突了