Skip to content

Commit 5021711

Browse files
caoxichengcaoxicheng
committed
feat(drop-down): 下拉菜单新增right-click触发方式 (#294)
1 parent 45b2473 commit 5021711

File tree

4 files changed

+65
-16
lines changed

4 files changed

+65
-16
lines changed

‎devui/dropdown/demo/multi-level/multi-level.component.html‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,47 @@ <h4>Click</h4>
3939
</ul>
4040
</div>
4141
</section>
42+
<section>
43+
<h4>Right-Click</h4>
44+
<div class="btn-group" dDropDown appendToBody [trigger]="'right-click'">
45+
<a dDropDownToggle class="devui-dropdown-default devui-dropdown-origin">
46+
More
47+
<span class="icon icon-chevron-down-2"></span>
48+
</a>
49+
<ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar">
50+
<li dDropDown appendToBody [trigger]="'click'" [appendToBodyDirections]="subMenuDirections">
51+
<a dDropDownMenuItem dDropDownToggle>Item 1 <span class="icon icon-chevron-right"></span></a>
52+
<ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar">
53+
<li dDropDown appendToBody [trigger]="'click'" [appendToBodyDirections]="subMenuDirections">
54+
<a dDropDownMenuItem dDropDownToggle>Item 1-1 <span class="icon icon-chevron-right"></span></a>
55+
<ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar">
56+
<li>
57+
<a dDropDownMenuItem>Item 1-1-1 </a>
58+
</li>
59+
<li>
60+
<a dDropDownMenuItem>Item 1-1-2 </a>
61+
</li>
62+
<li>
63+
<a dDropDownMenuItem>Item 1-1-3</a>
64+
</li>
65+
</ul>
66+
</li>
67+
<li dDropDown appendToBody [trigger]="'click'" [appendToBodyDirections]="subMenuDirections">
68+
<a dDropDownMenuItem dDropDownToggle>Item 1-2 <span class="icon icon-chevron-right"></span></a>
69+
<ul dDropDownMenu class="devui-dropdown-menu devui-scrollbar">
70+
<li>
71+
<a dDropDownMenuItem>Item 1-2-1</a>
72+
</li>
73+
</ul>
74+
</li>
75+
</ul>
76+
</li>
77+
<li>
78+
<a dDropDownMenuItem>Item 2</a>
79+
</li>
80+
</ul>
81+
</div>
82+
</section>
4283
<section>
4384
<h4>Hover</h4>
4485
<div class="btn-group" dDropDown appendToBody [trigger]="'hover'">

‎devui/dropdown/doc/api-cn.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,14 @@ import { DropDownModule } from 'ng-devui/dropdown';
1212
1313
### dDropDown 参数
1414

15-
| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 |
16-
| --------------------- | ------------------------------ | ------- | --------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | ---------- |
17-
| isOpen | `boolean` | false | 可选，可以显示指定 dropdown 是否打开 | [设置 isOpen 控制下拉](demo#dropdown-set-is-open) | |
18-
| disabled | `boolean` | false | 可选，设置为 true 禁用 dropdown | | |
19-
| trigger | `'click'\|'hover'\|'manually'` | 'click' | 可选，dropdown 触发方式, click 为点击，hover 为悬停（也包含点击）、manually 为完全手动控制 | [悬浮下拉](demo#suspension-drop-down) | |
20-
| closeScope | `'all'\|'blank'\|'none'` | 'all' | 可选，点击关闭区域，blank 点击非菜单空白才关闭, all 点击菜单内外都关闭，none 菜单内外均不关闭仅下拉按键可以关闭 | [关闭触发点设置](demo#turn-off-trigger-point-settings) | |
21-
| closeOnMouseLeaveMenu | `boolean` | false | 可选，是否进入菜单后离开菜单的时候关闭菜单 | [多级下拉菜单](demo#multi-level-drop-down-menu) | |
22-
| showAnimation | `boolean` | true | 可选，是否开启动画 | | ✔ |
15+
| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 |
16+
| --------------------- |----------------------------------------------| ------- |-------------------------------------------------------------------------------| ------------------------------------------------------ | ---------- |
17+
| isOpen | `boolean` | false | 可选，可以显示指定 dropdown 是否打开 | [设置 isOpen 控制下拉](demo#dropdown-set-is-open) | |
18+
| disabled | `boolean` | false | 可选，设置为 true 禁用 dropdown | | |
19+
| trigger | `'click'\|'hover'\|'manually\|'right-click'` | 'click' | 可选，dropdown 触发方式, click 为点击，hover 为悬停（也包含点击）、manually 为完全手动控制、right-click 为右击 | [悬浮下拉](demo#suspension-drop-down) | |
20+
| closeScope | `'all'\|'blank'\|'none'` | 'all' | 可选，点击关闭区域，blank 点击非菜单空白才关闭, all 点击菜单内外都关闭，none 菜单内外均不关闭仅下拉按键可以关闭 | [关闭触发点设置](demo#turn-off-trigger-point-settings) | |
21+
| closeOnMouseLeaveMenu | `boolean` | false | 可选，是否进入菜单后离开菜单的时候关闭菜单 | [多级下拉菜单](demo#multi-level-drop-down-menu) | |
22+
| showAnimation | `boolean` | true | 可选，是否开启动画 | | ✔ |
2323

2424
### dDropDown 事件
2525

‎devui/dropdown/dropdown-toggle.directive.ts‎

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@ import { AfterViewInit, Directive, ElementRef, Host, HostBinding, HostListener,
22
import { DropDownDirective } from './dropdown.directive';
33

44
@Directive({
5-
selector: '[dDropDownToggle]',
6-
exportAs: 'd-dropdown-toggle',
7-
standalone: false
5+
selector: '[dDropDownToggle]',
6+
exportAs: 'd-dropdown-toggle',
7+
standalone: false
88
})
99
export class DropDownToggleDirective implements OnInit, AfterViewInit {
1010
@HostBinding('attr.tabIndex') get tabIndex() {
@@ -42,6 +42,14 @@ export class DropDownToggleDirective implements OnInit, AfterViewInit {
4242
}
4343
return false;
4444
}
45+
@HostListener('contextmenu', ['$event'])
46+
toggleOnContextMenu(event: MouseEvent) {
47+
if (!this.disabled && this.dropdown.trigger === 'right-click') {
48+
event.preventDefault();
49+
this.dropdown.toggle();
50+
}
51+
return false;
52+
}
4553
// mousedown mouseup解决focus与click冲突问题
4654
@HostListener('mousedown', ['$event'])
4755
setMouseEventTrue(event) {

‎devui/dropdown/dropdown.directive.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,10 @@ import { debounceTime, delay, filter, mapTo, tap } from 'rxjs/operators';
2525
import { DropDownService } from './dropdown.service';
2626

2727
@Directive({
28-
selector: '[dDropDown]',
29-
exportAs: 'd-dropdown',
30-
providers: [DropDownService],
31-
standalone: false
28+
selector: '[dDropDown]',
29+
exportAs: 'd-dropdown',
30+
providers: [DropDownService],
31+
standalone: false
3232
})
3333
export class DropDownDirective implements OnDestroy, OnChanges, AfterContentInit {
3434
@ContentChildren(forwardRef(() => DropDownDirective), { descendants: true }) dropdownChildren: QueryList<DropDownDirective>;
@@ -72,7 +72,7 @@ export class DropDownDirective implements OnDestroy, OnChanges, AfterContentInit
7272
/**
7373
* dropdown触发方式
7474
*/
75-
@Input() trigger: 'click' | 'hover' | 'manually' = 'click';
75+
@Input() trigger: 'click' | 'hover' | 'manually' | 'right-click' = 'click';
7676
/**
7777
* 关闭区域，默认点击菜单链接也会关闭，blank点击其他空白区域才关闭
7878
*/

0 commit comments

Comments
 (0)