Ant Design Vue自定义菜单图标时收起菜单文字不隐藏问题

问题：自定义菜单图标时收起菜单文字不隐藏问题

代码：

<a-menu-item v-for="item in memberMenu" :key="item.path"><i :class="['iconfont', item.icon]" style="marginRight: 10px;fontSize:20px;"></i><span class="">{{ item.title }}</span>
</a-menu-item>

效果：

解决：在自定义图标外面加一个.anticon的span

代码：

<a-menu-item v-for="item in memberMenu" :key="item.path"><span class="anticon"><i :class="['iconfont', item.icon]" style="marginRight: 10px;fontSize:20px;"></i></span><span class="">{{ item.title }}</span>
</a-menu-item>

效果：

原因：隐藏是通过.anticon+span找到的

使用antd自带的icon时的代码

<a-menu-item v-for="item in memberMenu" :key="item.path"><a-icon :type="item.icon" style="fontSize:20px;" /><span>{{ item.title }}</span>
</a-menu-item>

DOM结构
css

Ant Design Vue自定义菜单图标时收起菜单文字不隐藏问题相关推荐

记录ant design vue a-select Form编辑时回显数据库数据为value而不是label的问题
记录ant design vue a-select Form编辑时回显数据库数据为value而不是label的问题先贴解决后的代码 option遍历的集合格式如下解释官方文档中解释到select ...
VUE3 使用 Ant Design Vue的icon图标
安装: npm install --save @ant-design/icons-vue 2.在main入口文件引入,不想一个个一得导入,可直接循环导入即可 import { createApp } ...
Ant Design Vue 组件或图标的引入和使用
// 组件或图标引入 <script lang="ts">import { defineComponent, reactive, ref } from 'vue';im ...
【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
1,首先在vue2项目中安装ant design vue组件 npm install ant-design-vue@1.7.2 2,a-cascader组件在页面中的使用 <template&g ...
Vue3 + Ant Design Vue 可搜索自定义字段 a-tree
记录一下,使用 Ant Design Vue a-tree 需要实现可搜索且后台返回数据不是标准数据的问题目录可搜索自定义字段完整全部代码可搜索自定义字段实现自定义字段需要使用 Tree ...
ant design vue 中Upload组件如何自定义文件列表的样式
ant design vue 中Upload组件如何自定义文件列表的样式问题历程 UploadList 组件源码 h() 方法实现注问题技术:vue.ant design vue 在开发项 ...
Ant Design Vue 组件@chang绑定方法如何传递自定义参数
Ant Design Vue 组件@chang绑定方法如何传递自定义参数今天在写代码的时候遇到一个问题: 在嵌套标签中外层使用了一个v-for循环去循环一个数组,当内层想要拿取index,并且使用 ...
VUE3 使用 Ant Design Vue 图标库的图标
emmm 就是 Ant Design Vue 这玩意用来做蛮好的支持VUE3 所以这里用了这个了. 首先他支持你一个个导入那岂不是.....傻里傻气的 ,所以我们一次性导入! 1. 先安装: ...
Ant Design Vue 表格筛选时只进行前台的按页筛选修改为后台的全局筛选
原因分析在我们使用 Ant Design Vue 表格筛选功能时会发现,如果只是按照例子来,只是前端的按页筛选,并不能都进行全局筛选,原因有两点: 1.我们筛选的时候,只是进行前端的数据过滤,并没有 ...

Ant Design Vue自定义菜单图标时收起菜单文字不隐藏问题

问题：自定义菜单图标时收起菜单文字不隐藏问题

解决：在自定义图标外面加一个.anticon的span

原因：隐藏是通过.anticon+span找到的

Ant Design Vue自定义菜单图标时收起菜单文字不隐藏问题相关推荐

最新文章

热门文章