Skip to content

Commit ef76c44

Browse files
GreatZPPGreatZPP
committed
merge dev_zp into master
feat(drop-down): 下拉菜单新增right-click触发方式 (#294) (#364) Created-by: GreatZP Commit-by: xucr11;锐来锐好;caoxicheng Merged-by: GreatZP Description: feat(drop-down): 下拉菜单新增right-click触发方式 (#294) (#364) fix(module:date-picker-pro): tab type demo fix(module:date-picker-pro): border radius style fix(module:modal): empty modal footer style fix(module:modal): empty modal footer style See merge request: DevCloudFE/ng-devui!6
2 parents 87d7638 + e6ea422 commit ef76c44

File tree

5 files changed

+74
-25
lines changed

5 files changed

+74
-25
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/doc/api-en.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 Parameter
1414

15-
| Parameter | Type | Default | Description | Jump to Demo | Global Config |
16-
| --------------------- | ----------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------- | ------------- |
17-
| isOpen | `boolean` | false | Optional. It indicates whether dropdown is enabled. | [Control dropdown meanu with isOpen](demo#dropdown-set-is-open) | |
18-
| disabled | `boolean` | false | Optional. Set this parameter to true to disable dropdown. | | |
19-
| trigger | `click'\|'hover'\|'manually'` | 'click' | Optional. Dropdown trigger mode. Click indicates click, hover indicates hover (including click), and manually indicates manual control. | [Hover dropdown](demo#suspension-drop-down) | |
20-
| closeScope | `'all'\|'blank'\|'none'` | 'all' | Optional. Click the blank area to close the blank area. Click all to close the blank area, the none menu can be closed either inside or outside. Only the drop-down button can be closed. | [Close Trigger Point Settings](demo#turn-off-trigger-point-settings) | |
21-
| closeOnMouseLeaveMenu | `boolean` | false | Optional. Whether to close the menu when you exit the menu after entering the menu | [Multi-level drop-down menu](demo#multi-level-drop-down-menu) | |
22-
| showAnimation | `boolean` | true | optional. Whether to enable animation. | | ✔ |
15+
| Parameter | Type | Default | Description | Jump to Demo | Global Config |
16+
| --------------------- |-----------------------------------------------|---------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -------------------------------------------------------------------- | ------------- |
17+
| isOpen | `boolean` | false | Optional. It indicates whether dropdown is enabled. | [Control dropdown meanu with isOpen](demo#dropdown-set-is-open) | |
18+
| disabled | `boolean` | false | Optional. Set this parameter to true to disable dropdown. | | |
19+
| trigger | `click'\|'hover'\|'manually'\| 'right-click'` | 'click' | Optional. Dropdown trigger mode. Click indicates click, hover indicates hover (including click), manually indicates manual control, and right-click indicates right-click(not including click) . | [Hover dropdown](demo#suspension-drop-down) | |
20+
| closeScope | `'all'\|'blank'\|'none'` | 'all' | Optional. Click the blank area to close the blank area. Click all to close the blank area, the none menu can be closed either inside or outside. Only the drop-down button can be closed. | [Close Trigger Point Settings](demo#turn-off-trigger-point-settings) | |
21+
| closeOnMouseLeaveMenu | `boolean` | false | Optional. Whether to close the menu when you exit the menu after entering the menu | [Multi-level drop-down menu](demo#multi-level-drop-down-menu) | |
22+
| showAnimation | `boolean` | true | optional. Whether to enable animation. | | ✔ |
2323

2424
### dDropDown Event
2525

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

Lines changed: 12 additions & 4 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() {
@@ -37,7 +37,15 @@ export class DropDownToggleDirective implements OnInit, AfterViewInit {
3737

3838
@HostListener('click', ['$event'])
3939
toggleDropdown(event: MouseEvent) {
40-
if (!this.disabled && this.dropdown.trigger !== 'manually') {
40+
if (!this.disabled && this.dropdown.trigger !== 'manually' && this.dropdown.trigger !== 'right-click') {
41+
this.dropdown.toggle();
42+
}
43+
return false;
44+
}
45+
@HostListener('contextmenu', ['$event'])
46+
toggleOnContextMenu(event: MouseEvent) {
47+
if (!this.disabled && this.dropdown.trigger === 'right-click') {
48+
event.preventDefault();
4149
this.dropdown.toggle();
4250
}
4351
return false;

‎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)