[van-dropdown-menu] 下拉選單倒三角對不齊的優化方案
阿新 • • 發佈：2021-01-01
技術標籤：vantdropdownMenu倒三角對不齊下拉選單優化方案vant
專案場景：
終端: 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;
}
}