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

AlexKain

于 2020-12-31 16:08:12 发布

阅读量1.6k

点赞数 1

文章标签： dropdownMenu 倒三角对不齐下拉菜单优化方案 vant

本文链接：https://blog.csdn.net/webfullstack/article/details/112020031

版权

vant 专栏收录该内容

3 篇文章

订阅专栏

项目场景：

终端: 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;
  }
}