feat: ✨ DroMenu 图标大小和位置样式逻辑调整为不缩放且不使用绝对定位 (#1243)

Author: Moonofweisheng

docs/component/drop-menu.md

@@ -116,7 +116,7 @@ function handleOpened() {
 
 ```html
 <wd-drop-menu>
-  <wd-drop-menu-item title="地图" icon="location" icon-size="24px" />
+  <wd-drop-menu-item title="地图" icon="location" icon-size="14px" />
 </wd-drop-menu>
 ```
 
@@ -137,22 +137,24 @@ function handleOpened() {
 
 ```typescript
 import { useMessage } from '@/uni_modules/wot-design-uni'
+import type { DropMenuItemBeforeToggle } from '@/uni_modules/wot-design-uni/components/wd-drop-menu-item/types'
+
 const messageBox = useMessage()
 
 const value = ref<number>(0)
 
 const option = ref<Record<string, any>[]>([
   { label: '全部商品', value: 0 },
-  { label: '新款商品', value: 1 },
-  { label: '活动商品', value: 2 }
+  { label: '新款商品', value: 1, tip: '这是补充信息' },
+  { label: '这是比较长的筛选条件这是比较长的筛选条件', value: 2 }
 ])
 
 // 通过对话框确认是否打开/关闭下拉菜单
 const handleBeforeToggle: DropMenuItemBeforeToggle = ({ status, resolve }) => {
   messageBox
     .confirm({
-      title: `异步${status ? '打开' : '关闭'}`,
-      msg: `确定要${status ? '打开' : '关闭'}下拉菜单吗？`
+      title: `${status ? '异步打开' : '异步关闭'}`,
+      msg: `${status ? '确定要打开下拉菜单吗' : '确定要关闭下拉菜单吗'}`
     })
     .then(() => {
       resolve(true)

docs/en-US/component/drop-menu.md

@@ -116,7 +116,7 @@ You can set the menu's right icon through `icon`, equivalent to the `name` prope
 
 ```html
 <wd-drop-menu>
-  <wd-drop-menu-item title="Map" icon="location" icon-size="24px" />
+  <wd-drop-menu-item title="Map" icon="location" icon-size="14px" />
 </wd-drop-menu>
 ```
 
@@ -137,6 +137,8 @@ The `before-toggle` function cannot prevent the expansion/closure operations of
 
 ```typescript
 import { useMessage } from '@/uni_modules/wot-design-uni'
+import type { DropMenuItemBeforeToggle } from '@/uni_modules/wot-design-uni/components/wd-drop-menu-item/types'
+
 const messageBox = useMessage()
 
 const value = ref<number>(0)

src/subPages/dropMenu/Index.vue

@@ -37,7 +37,7 @@
       </demo-block>
       <demo-block :title="$t('zi-ding-yi-cai-dan-tu-biao')" transparent>
         <wd-drop-menu>
-          <wd-drop-menu-item :title="$t('di-tu')" icon="location" icon-size="24px" />
+          <wd-drop-menu-item :title="$t('di-tu')" icon="location" icon-size="14px" />
         </wd-drop-menu>
       </demo-block>
       <demo-block :title="$t('yi-bu-da-kai-guan-bi')" transparent>

src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss

@@ -294,7 +294,7 @@ $-divider-vertical-line-width: var(--wot-divider-vertical-line-width, 1px) !defa
 $-drop-menu-height: var(--wot-drop-menu-height, 48px) !default; // 展示选中项的高度
 $-drop-menu-color: var(--wot-drop-menu-color, $-color-content) !default; // 展示选中项的颜色
 $-drop-menu-fs: var(--wot-drop-menu-fs, $-fs-content) !default; // 展示选中项的字号
-$-drop-menu-arrow-fs: var(--wot-drop-menu-arrow-fs, $-fs-content) !default; // 箭头图标大小
+$-drop-menu-arrow-fs: var(--wot-drop-menu-arrow-fs, $-fs-secondary) !default; // 箭头图标大小
 
 $-drop-menu-side-padding: var(--wot-drop-menu-side-padding, $-size-side-padding) !default; // 两边留白间距
 $-drop-menu-disabled-color: var(--wot-drop-menu-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 禁用颜色

src/uni_modules/wot-design-uni/components/wd-drop-menu/index.scss

@@ -41,7 +41,7 @@
         opacity: 1;
       }
       :deep(.wd-drop-menu__arrow) {
-        transform: scale(0.6) rotate(-180deg);
+        transform: rotate(-180deg);
         transform-origin: center center;
       }
     }
@@ -52,7 +52,9 @@
 
   @include e(item-title) {
     position: relative;
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     max-width: 100%;
     padding: 0 $-drop-menu-side-padding;
     box-sizing: border-box;
@@ -78,13 +80,7 @@
   }
 
   @include edeep(arrow) {
-    position: absolute;
-    display: inline-block;
-    top: 0;
-    right: -4px;
-    transition: transform 0.3s;
-    transform: scale(0.6);
     font-size: $-drop-menu-arrow-fs;
-    line-height: $-drop-menu-height;
+    margin-left: 2px;
   }
 }