diff --git a/examples/sites/demos/pc/app/action-menu/add-icon-composition-api.vue b/examples/sites/demos/pc/app/action-menu/add-icon-composition-api.vue
deleted file mode 100644
index af2b9138e..000000000
--- a/examples/sites/demos/pc/app/action-menu/add-icon-composition-api.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-
-
-
-
-
diff --git a/examples/sites/demos/pc/app/action-menu/add-icon.vue b/examples/sites/demos/pc/app/action-menu/add-icon.vue
deleted file mode 100644
index 1fce60d69..000000000
--- a/examples/sites/demos/pc/app/action-menu/add-icon.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-
-
-
-
-
diff --git a/examples/sites/demos/pc/app/action-menu/basic-usage.vue b/examples/sites/demos/pc/app/action-menu/basic-usage.vue
index b4bace8a5..77361dc0e 100644
--- a/examples/sites/demos/pc/app/action-menu/basic-usage.vue
+++ b/examples/sites/demos/pc/app/action-menu/basic-usage.vue
@@ -1,5 +1,5 @@
-
+
+
+
diff --git a/examples/sites/demos/pc/app/action-menu/icon.vue b/examples/sites/demos/pc/app/action-menu/icon.vue
new file mode 100644
index 000000000..4d003acc5
--- /dev/null
+++ b/examples/sites/demos/pc/app/action-menu/icon.vue
@@ -0,0 +1,79 @@
+
+
+
场景1:只显示图标
+
+
+
场景2:只显示文本
+
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/action-menu/popper-class.spec.ts b/examples/sites/demos/pc/app/action-menu/popper-class.spec.ts
index faf9e334b..ba12438af 100644
--- a/examples/sites/demos/pc/app/action-menu/popper-class.spec.ts
+++ b/examples/sites/demos/pc/app/action-menu/popper-class.spec.ts
@@ -9,8 +9,9 @@ test('弹框样式', async ({ page }) => {
const visibleItem = actionMenu.locator('.tiny-action-menu__item')
const dropDownMenu = page.locator('body > .tiny-dropdown-menu.tiny-popper')
- await page.waitForTimeout(300)
+ await page.waitForTimeout(1300)
await visibleItem.last().hover()
+ await page.waitForTimeout(200)
await expect(dropDownMenu).toHaveClass(/custom-action-menu/)
await expect(dropDownMenu).toHaveCSS('background-color', 'rgb(250, 235, 215)')
})
diff --git a/examples/sites/demos/pc/app/action-menu/webdoc/action-menu.js b/examples/sites/demos/pc/app/action-menu/webdoc/action-menu.js
index 6d6d8b769..b34f935c8 100644
--- a/examples/sites/demos/pc/app/action-menu/webdoc/action-menu.js
+++ b/examples/sites/demos/pc/app/action-menu/webdoc/action-menu.js
@@ -22,14 +22,15 @@ export default {
'codeFiles': ['disabled.vue']
},
{
- 'demoId': 'add-icon',
+ 'demoId': 'icon',
'name': { 'zh-CN': '图标', 'en-US': 'Icon' },
'desc': {
- 'zh-CN': '通过属性 icon
配置菜单按钮前的图标。',
+ 'zh-CN':
+ '通过 icon
属性设置菜单项的图标,suffix-icon
设置下拉触发源图标,show-icon
设置是否显示下拉触发源图标。',
'en-US':
- 'The icon
attribute is used to Configure the icon in front of the menu button.'
+ 'Set the icon of the attribute setting menu item through icon
, set the drop-down trigger source icon through suffix-icon
, and set whether to display the drop-down trigger source icon through show-icon
.'
},
- 'codeFiles': ['add-icon.vue']
+ 'codeFiles': ['icon.vue']
},
{
'demoId': 'text-field',
@@ -139,13 +140,6 @@ export default {
},
'demoId': 'more-text'
},
- {
- 'name': 'icon',
- 'type': 'component',
- 'defaultValue': '',
- 'desc': { 'zh-CN': '菜单项显示值前的图标', 'en-US': 'Icon of a menu item' },
- 'demId': 'add-icon'
- },
{
'name': 'options',
'type': 'IItemData[]',
@@ -198,6 +192,16 @@ export default {
},
'demoId': 'disabled'
},
+ {
+ 'name': 'options.icon',
+ 'type': 'VueComponent',
+ 'defaultValue': '',
+ 'desc': {
+ 'zh-CN': '菜单项图标',
+ 'en-US': 'Icon of a menu item'
+ },
+ 'demId': 'icon'
+ },
{
'name': 'popper-class',
'type': 'string',
@@ -211,13 +215,33 @@ export default {
{
'name': 'spacing',
'type': 'string | number',
- 'defaultValue': '5px',
+ 'defaultValue': "'5px'",
'desc': {
'zh-CN': '菜单按钮之间的间距',
'en-US': 'Spacing between menu buttons'
},
'demoId': 'spacing'
},
+ {
+ 'name': 'suffix-icon',
+ 'type': 'VueComponent',
+ 'defaultValue': '',
+ 'desc': {
+ 'zh-CN': '下拉触发源图标',
+ 'en-US': 'Dropdown trigger source icon'
+ },
+ 'demoId': 'icon'
+ },
+ {
+ 'name': 'show-icon',
+ 'type': 'boolean',
+ 'defaultValue': 'true',
+ 'desc': {
+ 'zh-CN': '是否显示下拉触发源图标',
+ 'en-US': 'Is the dropdown trigger source icon displayed'
+ },
+ 'demoId': 'icon'
+ },
{
'name': 'text-field',
'type': 'string',
diff --git a/examples/sites/demos/pc/app/dropdown/events-composition-api.vue b/examples/sites/demos/pc/app/dropdown/events-composition-api.vue
index e51e5e7a8..370573f24 100644
--- a/examples/sites/demos/pc/app/dropdown/events-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/events-composition-api.vue
@@ -19,7 +19,7 @@
场景2:配置式
-
+
diff --git a/examples/sites/demos/pc/app/dropdown/events.spec.ts b/examples/sites/demos/pc/app/dropdown/events.spec.ts
index 0db4c75c1..01ba126de 100644
--- a/examples/sites/demos/pc/app/dropdown/events.spec.ts
+++ b/examples/sites/demos/pc/app/dropdown/events.spec.ts
@@ -35,6 +35,7 @@ test('配置式内置事件', async ({ page }) => {
const wrap = page.locator('#events')
const notify = page.locator('.tiny-notify')
const dropDown = wrap.locator('.tiny-dropdown').nth(1)
+
await expect(dropDown).toHaveClass(/options-event/)
const dropDownMenuItem = page.locator('body > .tiny-dropdown-menu > .tiny-dropdown-item')
diff --git a/examples/sites/demos/pc/app/dropdown/multi-level-composition-api.vue b/examples/sites/demos/pc/app/dropdown/multi-level-composition-api.vue
index 72ea87e02..0720ad848 100644
--- a/examples/sites/demos/pc/app/dropdown/multi-level-composition-api.vue
+++ b/examples/sites/demos/pc/app/dropdown/multi-level-composition-api.vue
@@ -1,7 +1,7 @@
场景1:使用 menu-options 属性定义 children
-
+
场景2:使用 options 属性定义 children
@@ -14,7 +14,7 @@
diff --git a/examples/sites/demos/pc/app/dropdown/multi-level.spec.ts b/examples/sites/demos/pc/app/dropdown/multi-level.spec.ts
index 6870ccafb..c767a1feb 100644
--- a/examples/sites/demos/pc/app/dropdown/multi-level.spec.ts
+++ b/examples/sites/demos/pc/app/dropdown/multi-level.spec.ts
@@ -5,22 +5,27 @@ test('多级菜单,使用 menu-options', async ({ page }) => {
await page.goto('dropdown#multi-level')
const wrap = page.locator('#multi-level')
- const dropDown = wrap.locator('.tiny-dropdown').first()
+ const dropDown = wrap.locator('.tiny-dropdown').nth(0)
const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
- const notify = page.locator('.tiny-notify')
- await page.waitForTimeout(1500)
+ await page.waitForTimeout(2000)
await dropDown.hover()
await expect(dropDownMenu).toBeVisible()
+ await page.waitForTimeout(500)
await dropDownMenuItem.first().hover()
+ await page.waitForTimeout(500)
await dropDownMenuItem.getByText('老友粉2.1').hover()
+ await expect(dropDownMenuItem.getByText('狮子头3.1')).toBeVisible()
await dropDownMenuItem.getByText('狮子头3.1').click()
+ await page.waitForTimeout(1000)
+
await expect(
- notify.filter({
+ page.locator('.tiny-modal').filter({
hasText: '配置式可以通过 data.itemData 获取配置数据:{"label":"狮子头3.1"}'
})
- ).toBeVisible()
+ ).toHaveCount(1)
+ await page.waitForTimeout(500)
})
test('多级菜单,使用 options', async ({ page }) => {
@@ -31,17 +36,19 @@ test('多级菜单,使用 options', async ({ page }) => {
const dropDown = wrap.locator('.tiny-dropdown').nth(1)
const dropDownMenu = page.locator('body > .tiny-dropdown-menu')
const dropDownMenuItem = dropDownMenu.locator('.tiny-dropdown-item')
- const notify = page.locator('.tiny-notify')
- await page.waitForTimeout(1500)
+ await page.waitForTimeout(2000)
await dropDown.hover()
await expect(dropDownMenu).toBeVisible()
+ await page.waitForTimeout(500)
await dropDownMenuItem.first().hover()
+ await page.waitForTimeout(500)
await dropDownMenuItem.getByText('老友粉2.1').hover()
await dropDownMenuItem.getByText('狮子头3.1').click()
+ await page.waitForTimeout(1000)
await expect(
- notify.filter({
+ page.locator('.tiny-modal').filter({
hasText: '配置式可以通过 data.itemData 获取配置数据:{"label":"狮子头3.1"}'
})
- ).toBeVisible()
+ ).toHaveCount(1)
})
diff --git a/examples/sites/demos/pc/app/dropdown/multi-level.vue b/examples/sites/demos/pc/app/dropdown/multi-level.vue
index c91c2aa5f..3ea987a19 100644
--- a/examples/sites/demos/pc/app/dropdown/multi-level.vue
+++ b/examples/sites/demos/pc/app/dropdown/multi-level.vue
@@ -13,7 +13,7 @@
+
+
diff --git a/examples/sites/demos/pc/app/dropdown/show-icon.vue b/examples/sites/demos/pc/app/dropdown/show-icon.vue
index 4081107a8..8aa0e8c64 100644
--- a/examples/sites/demos/pc/app/dropdown/show-icon.vue
+++ b/examples/sites/demos/pc/app/dropdown/show-icon.vue
@@ -1,26 +1,56 @@
-
-
-
-
- 黄金糕
- 狮子头
- 螺蛳粉
- 双皮奶
- 蚵仔煎
-
-
-
+
+
场景1: 只显示文本
+
+
+
+
+ 黄金糕
+ 狮子头
+ 螺蛳粉
+ 双皮奶
+ 蚵仔煎
+
+
+
+
场景2:自定义图且只显示图标
+
+
+
+
+ 黄金糕
+ 狮子头
+ 螺蛳粉
+ 双皮奶
+ 蚵仔煎
+
+
+
+
+
+
diff --git a/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js b/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js
index 5f0744078..e2518deba 100644
--- a/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js
+++ b/examples/sites/demos/pc/app/dropdown/webdoc/dropdown.js
@@ -33,11 +33,12 @@ export default {
},
{
'demoId': 'show-icon',
- 'name': { 'zh-CN': '隐藏图标', 'en-US': 'Show icons' },
+ 'name': { 'zh-CN': '图标', 'en-US': 'Show icons' },
'desc': {
- 'zh-CN': '通过 show-icon
属性设置触发源的图标显示或隐藏,默认显示,设置为 false 时隐藏。
\n',
+ 'zh-CN':
+ '通过 show-icon
属性设置是否显示下拉触发源图标,suffix-icon
设置下拉触发源图标。
\n',
'en-US':
- 'Additional sizes: medium
, small
, mini
, configured by setting the size
property.
\n'
+ ' Set whether to display the dropdown trigger source icon through the show-icon
attribute, and set the dropdown trigger source icon through the suffix-icon
setting.
\n'
},
'codeFiles': ['show-icon.vue']
},
@@ -237,6 +238,16 @@ export default {
},
'demoId': 'trigger'
},
+ {
+ 'name': 'size',
+ 'type': '"medium" | "small" | "mini"',
+ 'defaultValue': '',
+ 'desc': {
+ 'zh-CN': '菜单尺寸。注意:只在 split-button为 true 的情况下生效',
+ 'en-US': 'Menu size. Note: Only takes effect when split-button is true'
+ },
+ 'demoId': 'size'
+ },
{
'name': 'split-button',
'type': 'boolean',
@@ -248,14 +259,24 @@ export default {
'demoId': 'split-button'
},
{
- 'name': 'size',
- 'type': '"medium" | "small" | "mini"',
+ 'name': 'show-icon',
+ 'type': 'boolean',
+ 'defaultValue': 'true',
+ 'desc': {
+ 'zh-CN': '是否显示下拉触发源图标',
+ 'en-US': 'Is the dropdown trigger source icon displayed'
+ },
+ 'demoId': 'show-icon'
+ },
+ {
+ 'name': 'suffix-icon',
+ 'type': 'VueComponent',
'defaultValue': '',
'desc': {
- 'zh-CN': '菜单尺寸。注意:只在 split-button为 true 的情况下生效',
- 'en-US': 'Menu size. Note: Only takes effect when split-button is true'
+ 'zh-CN': '下拉触发源图标',
+ 'en-US': 'Dropdown trigger source icon'
},
- 'demoId': 'size'
+ 'demoId': 'show-icon'
},
{
'name': 'type',
diff --git a/packages/design/smb/src/action-menu/index.ts b/packages/design/smb/src/action-menu/index.ts
index 8ec39cc2a..c7f87dc12 100644
--- a/packages/design/smb/src/action-menu/index.ts
+++ b/packages/design/smb/src/action-menu/index.ts
@@ -1,7 +1,3 @@
-import { IconEllipsis } from '@opentiny/vue-icon'
-
export default {
- icons: {
- moreIcon: IconEllipsis()
- }
+ icons: {}
}
diff --git a/packages/renderless/src/action-menu/vue.ts b/packages/renderless/src/action-menu/vue.ts
index 331da8245..99c8c6bc9 100644
--- a/packages/renderless/src/action-menu/vue.ts
+++ b/packages/renderless/src/action-menu/vue.ts
@@ -24,13 +24,12 @@ export const api = ['state', 'handleMoreClick', 'handleItemClick', 'visibleChang
export const renderless = (
props: IActionMenuProps,
{ computed, reactive }: ISharedRenderlessParamHooks,
- { emit, designConfig }: IActionMenuRenderlessParamUtils
+ { emit }: IActionMenuRenderlessParamUtils
): IActionMenuApi => {
const state: IActionMenuState = reactive({
visibleOptions: computed(() => props.options.slice(0, props.maxShowNum)),
moreOptions: computed(() => props.options.slice(props.maxShowNum)),
- spacing: computed(() => (String(props.spacing).includes('px') ? props.spacing : props.spacing + 'px')),
- moreIcon: computed(() => designConfig?.icons?.moreIcon)
+ spacing: computed(() => (String(props.spacing).includes('px') ? props.spacing : props.spacing + 'px'))
})
const api: IActionMenuApi = {
diff --git a/packages/theme/src/action-menu/aurora-theme.js b/packages/theme/src/action-menu/aurora-theme.js
index c2dc5aead..e5e0dd82b 100644
--- a/packages/theme/src/action-menu/aurora-theme.js
+++ b/packages/theme/src/action-menu/aurora-theme.js
@@ -1,5 +1,4 @@
export const tinyActionMenuAuroraTheme = {
'ti-action-menu-text-color': 'var(--ti-common-color-text-highlight)',
- 'ti-action-menu-item-hover-text-color': 'var(--ti-common-color-text-link-hover)',
- 'ti-action-menu-suffix-inner-display': 'inline-block'
+ 'ti-action-menu-item-hover-text-color': 'var(--ti-common-color-text-link-hover)'
}
diff --git a/packages/theme/src/action-menu/index.less b/packages/theme/src/action-menu/index.less
index b5ae1bef5..b9df25a6b 100644
--- a/packages/theme/src/action-menu/index.less
+++ b/packages/theme/src/action-menu/index.less
@@ -19,25 +19,15 @@
.@{action-menu-prefix-cls} {
.component-css-vars-action-menu();
+
.@{dropdown-prefix-cls} {
- .@{dropdown-prefix-cls}__suffix-inner {
- display: var(--ti-action-menu-suffix-inner-display);
- }
-
.@{dropdown-prefix-cls}-trigger {
- &:hover {
- background-color: var(--ti-action-menu-more-icon-hover-bgc);
- border-radius: var(--ti-action-menu-more-icon-hover-radius);
- }
-
.tiny-svg {
- margin-right: 0;
- padding: var(--ti-action-menu-more-icon-padding);
- width: var(--ti-action-menu-more-icon-width);
- height: var(--ti-action-menu-more-icon-height);
+ margin-right: var(--ti-action-menu-more-icon-margin-right);
}
}
}
+
font-size: var(--ti-action-menu-font-size);
font-weight: var(--ti-action-menu-font-weight);
color: var(--ti-action-menu-text-color);
@@ -54,8 +44,13 @@
fill: var(--ti-action-menu-text-color); // TINY-TODO :没有使用--ti-base-color-brand-7的图标色
margin: var(--ti-action-menu-item-svg-margin-top) var(--ti-action-menu-item-svg-margin-right)
var(--ti-action-menu-item-svg-margin-bottom) var(--ti-action-menu-item-svg-margin-left);
+ }
+
+ &:not(:has(.tiny-dropdown)) {
+ .tiny-svg {
width: var(--ti-action-menu-more-icon-width);
height: var(--ti-action-menu-more-icon-height);
+ }
}
&:not(.is-disabled):hover {
diff --git a/packages/theme/src/action-menu/smb-theme.js b/packages/theme/src/action-menu/smb-theme.js
index 221871637..5963ed6b6 100644
--- a/packages/theme/src/action-menu/smb-theme.js
+++ b/packages/theme/src/action-menu/smb-theme.js
@@ -1,16 +1,13 @@
export const tinyActionMenuSmbTheme = {
- 'ti-action-menu-item-line-bg-color': 'var(--ti-common-color-transparent)',
- 'ti-dropdown-item-font-size': 'var(--ti-common-font-size-1)',
- 'ti-dropdown-item-line-height': 'var(--ti-common-line-height-2)',
- 'ti-action-menu-item-svg-margin-top': '0',
- 'ti-action-menu-font-weight': 'var(--ti-common-font-weight-bold)',
- 'ti-action-menu-item-hover-text-color': 'var(--ti-common-color-text-link)',
- 'ti-action-menu-item-line-width': 'var(--ti-common-space-0)',
- 'ti-action-menu-hover-text-decoratio': 'underline',
- 'ti-dropdown-line-height': 'calc(var(--ti-common-line-height-4) + 2px)',
- 'ti-action-menu-suffix-inner-display': 'none',
- 'ti-action-menu-more-icon-width': 'var(--ti-common-size-6x)',
- 'ti-action-menu-more-icon-height': 'var(--ti-common-size-6x)',
- 'ti-action-menu-more-icon-hover-bgc': 'rgba(0,0,0,0.05)',
- 'ti-action-menu-more-icon-hover-radius': 'var(--ti-common-border-radius-2)'
-}
\ No newline at end of file
+ 'ti-action-menu-item-line-bg-color': 'var(--ti-common-color-transparent)',
+ 'ti-dropdown-item-font-size': 'var(--ti-common-font-size-1)',
+ 'ti-dropdown-item-line-height': 'var(--ti-common-line-height-2)',
+ 'ti-action-menu-item-svg-margin-top': '0',
+ 'ti-action-menu-font-weight': 'var(--ti-common-font-weight-bold)',
+ 'ti-action-menu-item-hover-text-color': 'var(--ti-common-color-text-link)',
+ 'ti-action-menu-item-line-width': 'var(--ti-common-space-0)',
+ 'ti-action-menu-hover-text-decoratio': 'underline',
+ 'ti-dropdown-line-height': 'calc(var(--ti-common-line-height-4) + 2px)',
+ 'ti-action-menu-more-icon-width': 'var(--ti-common-size-5x)',
+ 'ti-action-menu-more-icon-height': 'var(--ti-common-size-5x)'
+}
diff --git a/packages/theme/src/action-menu/vars.less b/packages/theme/src/action-menu/vars.less
index cce7486ea..9e3463495 100644
--- a/packages/theme/src/action-menu/vars.less
+++ b/packages/theme/src/action-menu/vars.less
@@ -15,18 +15,12 @@
--ti-action-menu-font-weight: var(--ti-common-font-weight-normal);
// 按钮文本装饰
--ti-action-menu-hover-text-decoratio: none;
- // 更多后面的箭头是否显示
- --ti-action-menu-suffix-inner-display: none;
// 更多...图标的宽度
--ti-action-menu-more-icon-width: 1em;
// 更多...图标的高度
--ti-action-menu-more-icon-height: 1em;
- // 更多...图标hover态的背景颜色
- --ti-action-menu-more-icon-hover-bgc: transparent;
- // 更多...图标的内边距
- --ti-action-menu-more-icon-padding: 2px;
- // 更多...图标的圆角
- --ti-action-menu-more-icon-hover-radius: var(--ti-common-border-radius-0);
+ // 更多...图标的右边外边距
+ --ti-action-menu-more-icon-margin-right: var(--ti-common-space-0, 0px);
// 下拉触发源文本颜色
--ti-action-menu-text-color: var(--ti-common-color-text-link, #526ecc);
// 下拉触发源文本禁用色
diff --git a/packages/theme/src/dropdown/index.less b/packages/theme/src/dropdown/index.less
index b55e311ff..5f6e805aa 100644
--- a/packages/theme/src/dropdown/index.less
+++ b/packages/theme/src/dropdown/index.less
@@ -29,22 +29,44 @@
display: inline-block;
}
- &__trigger {
+ & &__trigger:not(.tiny-button) {
+ display: flex;
+ align-items: center;
+
+ .tiny-svg {
+ margin-top: var(--ti-dropdown-trigger-svg-margin-top);
+ margin-bottom: var(--ti-dropdown-trigger-svg-margin-bottom);
+ vertical-align: top;
+ }
+
+ &:not(:has(.@{dropdown-prefix-cls}__title)) > .@{dropdown-prefix-cls}__suffix-inner {
+ .tiny-svg {
+ width: var(--ti-dropdown-trigger-only-svg-width);
+ height: var(--ti-dropdown-trigger-only-svg-height);
+ margin: 2px;
+ }
+ &:hover {
+ background-color: var(--ti-dropdown-trigger-only-svg-hover-bg-color);
+ border-radius: var(--ti-dropdown-trigger-only-svg-hover-radius);
+ }
+ }
+ }
+
+ & &__trigger {
.@{dropdown-prefix-cls}__title {
line-height: var(--ti-dropdown-line-height);
+ margin-right: var(--ti-dropdown-trigger-title-margin-right);
}
.@{svg-prefix-cls} {
fill: var(--ti-dropdown-icon-color);
font-size: var(--ti-dropdown-icon-size);
- vertical-align: middle;
- margin-top: -4px;
- margin-left: var(--ti-dropdown-trigger-svg-margin-left);
}
&.@{css-prefix}button .@{svg-prefix-cls} {
fill: var(--ti-dropdown-button-icon-color);
font-size: var(--ti-dropdown-button-icon-size);
+ margin-left: var(--ti-dropdown-trigger-svg-margin-left);
}
&.@{css-prefix}button--default .@{svg-prefix-cls} {
diff --git a/packages/theme/src/dropdown/smb-theme.js b/packages/theme/src/dropdown/smb-theme.js
index 68304a5ae..da3c16583 100644
--- a/packages/theme/src/dropdown/smb-theme.js
+++ b/packages/theme/src/dropdown/smb-theme.js
@@ -8,5 +8,11 @@ export const tinyDropdownSmbTheme = {
'ti-dropdown-caret-line-width': 'var(--ti-common-size-0)',
'ti-dropdown-title-button-padding-left': 'var(--ti-common-space-6x)',
'ti-dropdown-title-button-padding-right': 'var(--ti-common-space-0)',
- 'ti-dropdown-button-icon-size': 'var(--ti-common-font-size-2)'
+ 'ti-dropdown-button-icon-size': 'var(--ti-common-font-size-2)',
+ 'ti-dropdown-trigger-svg-margin-top': 'var(--ti-common-space-0)',
+ 'ti-dropdown-trigger-svg-margin-bottom': 'var(--ti-common-space-0)',
+ 'ti-dropdown-trigger-only-svg-width': 'var(--ti-common-size-5x)',
+ 'ti-dropdown-trigger-only-svg-height': 'var(--ti-common-size-5x)',
+ 'ti-dropdown-trigger-only-svg-hover-bg-color': 'rgba(0,0,0,0.05)',
+ 'ti-dropdown-trigger-only-svg-hover-radius': 'var(--ti-common-border-radius-2)'
}
diff --git a/packages/theme/src/dropdown/vars.less b/packages/theme/src/dropdown/vars.less
index 20bee359e..fb3d9a815 100644
--- a/packages/theme/src/dropdown/vars.less
+++ b/packages/theme/src/dropdown/vars.less
@@ -13,14 +13,28 @@
--ti-dropdown-icon-color: var(--ti-common-color-text-link, #526ecc);
// 下拉菜单触发元素悬浮时的图标颜色
--ti-dropdown-icon-color-hover: var(--ti-common-color-text-link-hover, #344899);
+ // 下拉菜单触发元素只有图标时的图标宽度
+ --ti-dropdown-trigger-only-svg-width: var(--ti-common-size-5x);
+ // 下拉菜单触发元素只有图标时的图标高度
+ --ti-dropdown-trigger-only-svg-height: var(--ti-common-size-5x);
+ // 下拉菜单触发元素只有图标时的图标悬浮背景色
+ --ti-dropdown-trigger-only-svg-hover-bg-color: var(--ti-common-color-bg-white-emphasize, #f2f5fc);
+ // 下拉菜单触发元素只有图标时的图标圆角
+ --ti-dropdown-trigger-only-svg-hover-radius: var(--ti-common-border-radius-normal);
// 下拉菜单触发元素按钮类型时图标颜色
--ti-dropdown-button-icon-color: var(--ti-common-color-icon-white, #fff);
// 下拉菜单触发元素按钮类型时图标尺寸
--ti-dropdown-button-icon-size: var(--ti-common-font-size-1, 14px);
// 下拉菜单触发元素的文本禁用色
--ti-dropdown-text-color-disabled: var(--ti-common-color-text-disabled, #adb0b8);
+ // 下拉菜单触发源图标的右侧外边距
+ --ti-dropdown-trigger-title-margin-right: var(--ti-common-space-base, 4px);
// 下拉菜单触发源图标的左侧外边距
--ti-dropdown-trigger-svg-margin-left: var(--ti-common-space-base, 4px);
+ // 下拉菜单触发源图标的上侧外边距
+ --ti-dropdown-trigger-svg-margin-top: 1px;
+ // 下拉菜单触发源图标的下侧外边距
+ --ti-dropdown-trigger-svg-margin-bottom: 1px;
// 下拉菜触发元素为按钮组时,下拉按钮的左侧内边距
--ti-dropdown-caret-button-padding-left: var(--ti-common-space-base, 4px);
// 下拉菜单触发元素为按钮组时,下拉按钮的右侧侧内边距
diff --git a/packages/vue/src/action-menu/src/index.ts b/packages/vue/src/action-menu/src/index.ts
index 5148f5c1b..54d0dbe39 100644
--- a/packages/vue/src/action-menu/src/index.ts
+++ b/packages/vue/src/action-menu/src/index.ts
@@ -43,6 +43,11 @@ export const actionMenuProps = {
trigger: {
type: String,
default: 'hover'
+ },
+ suffixIcon: Object,
+ showIcon: {
+ type: Boolean,
+ default: true
}
}
diff --git a/packages/vue/src/action-menu/src/pc.vue b/packages/vue/src/action-menu/src/pc.vue
index bec9bd6e0..5a3586341 100644
--- a/packages/vue/src/action-menu/src/pc.vue
+++ b/packages/vue/src/action-menu/src/pc.vue
@@ -23,15 +23,14 @@