[van-dropdown-menu] 下拉菜单倒三角对不齐的优化方案

原创于 2020-12-31 16:08:12 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#dropdownMenu #倒三角对不齐 #下拉菜单 #优化方案 #vant

vant 专栏收录该内容

3 篇文章

订阅专栏

在Vue H5页面使用vant框架的van-dropdown-menu组件时遇到了文字溢出导致的样式错位问题，特别是下拉菜单的倒三角图标对齐出现问题。分析原因是倒三角的定位依赖于其父元素，而父元素宽度受到文字溢出元素的影响。为了解决这个问题，采用了CSS的Grid布局方案。通过设置`.van-dropdown-menu__item`的`justify-content`为`flex-start`和`.van-dropdown-menu__title`的`display`为`grid`及移除内边距，成功修复了倒三角的对齐问题。

项目场景：

终端: H5

框架:

"vant": "^2.11.2",

"vue": "^2.6.11",

H5页面上使用van-dropdown-menu组件出现了样式错位的问题

在文字溢出时出现样式问题,
文字没有达到溢出的条件时没有问题

问题描述：

van-dropdown-menu组件文字溢出时中遇到的问题：下拉菜单倒三角对不齐

在这里插入图片描述

原因分析：

倒三角的定位,是根据父级元素做的定位,父级元素的宽度受倒三角的兄弟元素的影响,倒三角的兄弟元素文字溢出时,导致倒三角的的位置也跟着变化

解决方案：

给倒三角的父级元素做网格布局（Grid）代码如下:

.van-dropdown-menu {
  .van-dropdown-menu__item {
    justify-content: flex-start;
  }
  .van-dropdown-menu__title {
    display: grid;
    padding: 0;
  }
}