vue项目里引入mui.js后里面的tabbar点击切换失效的解决办法

最新推荐文章于 2026-06-12 09:31:42 发布

原创最新推荐文章于 2026-06-12 09:31:42 发布 · 850 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#mui #vue

收录于

vue 专栏收录该内容

2 篇文章

订阅专栏

在Vue项目中引入mui.js后，遇到Tabbar点击切换失效的问题，原因可能是样式类名冲突。解决方法是将mui.js中Tabbar的样式复制到自定义样式文件中，修改类名，确保与标签上的类名一致，从而避免样式冲突导致的切换失效。

mui这个库问题还真不少。在引入mui.js后，其tabbar在vue项目中点击切换失效，原因是tabbar这个组件的样式类名可能是和min.js冲突了，所以解决办法，就是把其样式的类名重新修改，具体如下：

在浏览器中找到所有的class="mui-tab-item"的样式，并把其样式复制到自己定义的style里面，然后修改class="mui-tab-item",并把对应标签上的类名改为和你修改的一样。

// 修改类名，解决tabbar点击无法切换的问题

.mui-bar-tab .mui-tab-item-cc.mui-active {
    color: #007aff;
}
.mui-bar-tab .mui-tab-item-cc {
    display: table-cell;
    overflow: hidden;
    width: 1%;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: #929292;
}
.mui-bar-tab .mui-tab-item-cc .mui-icon {
    top: 3px;
    width: 24px;
    height: 24px;
    padding-top: 0;
    padding-bottom: 0;
}
.mui-bar-tab .mui-tab-item-cc .mui-icon ~ .mui-tab-label {
    font-size: 11px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
}

<router-link class="mui-tab-item-cc" to="/home">
   <span class="mui-icon mui-icon-home"></span>
   <span class="mui-tab-label">首页</span>
</router-link>