chenhaodong / mew-iview

Commit eccaa940bd2f68269c8fb18238c661bb598b1157

Authored by 梁灏
1 parent 172e4396

Dropdown add new trigger contextMenu

Showing 3 changed files with 69 additions and 349 deletions   Show diff stats
Inline Side-by-side
examples/routers/dropdown.vue
  Show/Hide comments   View file @eccaa94
1 1 <template>
2 2 <div>
3   - <div>
4   - <Dropdown trigger="click" style="margin-left: 20px" placement="right-start" >
5   - <a href="javascript:void(0)">
6   - right-start
7   - <Icon type="arrow-down-b"></Icon>
8   - </a>
9   - <DropdownMenu slot="list">
10   - <DropdownItem>驴打滚</DropdownItem>
11   - <DropdownItem>炸酱面</DropdownItem>
12   - <DropdownItem>豆汁儿</DropdownItem>
13   - <DropdownItem>冰糖葫芦</DropdownItem>
14   - <DropdownItem>北京烤鸭</DropdownItem>
15   - </DropdownMenu>
16   - </Dropdown>
17   - <Dropdown trigger="click" style="margin-left: 20px" placement="right-end" >
18   - <a href="javascript:void(0)">
19   - right-end
20   - <Icon type="arrow-down-b"></Icon>
21   - </a>
22   - <DropdownMenu slot="list">
23   - <DropdownItem>驴打滚</DropdownItem>
24   - <DropdownItem>炸酱面</DropdownItem>
25   - <DropdownItem>豆汁儿</DropdownItem>
26   - <DropdownItem>冰糖葫芦</DropdownItem>
27   - <DropdownItem>北京烤鸭</DropdownItem>
28   - </DropdownMenu>
29   - </Dropdown>
30   -
31   - <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-start" >
32   - <a href="javascript:void(0)">
33   - bottom-start
34   - <Icon type="arrow-down-b"></Icon>
35   - </a>
36   - <DropdownMenu slot="list">
37   - <DropdownItem>驴打滚</DropdownItem>
38   - <DropdownItem>炸酱面</DropdownItem>
39   - <DropdownItem>豆汁儿</DropdownItem>
40   - <DropdownItem>冰糖葫芦</DropdownItem>
41   - <DropdownItem>北京烤鸭</DropdownItem>
42   - </DropdownMenu>
43   - </Dropdown>
44   - <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-end" >
45   - <a href="javascript:void(0)">
46   - bottom-end
47   - <Icon type="arrow-down-b"></Icon>
48   - </a>
49   - <DropdownMenu slot="list">
50   - <DropdownItem>驴打滚</DropdownItem>
51   - <DropdownItem>炸酱面</DropdownItem>
52   - <DropdownItem>豆汁儿</DropdownItem>
53   - <DropdownItem>冰糖葫芦</DropdownItem>
54   - <DropdownItem>北京烤鸭</DropdownItem>
55   - </DropdownMenu>
56   - </Dropdown>
57   -
58   - <Dropdown trigger="click" style="margin-left: 20px" placement="top-start" >
59   - <a href="javascript:void(0)">
60   - top-start
61   - <Icon type="arrow-down-b"></Icon>
62   - </a>
63   - <DropdownMenu slot="list">
64   - <DropdownItem>驴打滚</DropdownItem>
65   - <DropdownItem>炸酱面</DropdownItem>
66   - <DropdownItem>豆汁儿</DropdownItem>
67   - <DropdownItem>冰糖葫芦</DropdownItem>
68   - <DropdownItem>北京烤鸭</DropdownItem>
69   - </DropdownMenu>
70   - </Dropdown>
71   - <Dropdown trigger="click" style="margin-left: 20px" placement="top-end" >
72   - <a href="javascript:void(0)">
73   - top-end
74   - <Icon type="arrow-down-b"></Icon>
75   - </a>
76   - <DropdownMenu slot="list">
77   - <DropdownItem>驴打滚</DropdownItem>
78   - <DropdownItem>炸酱面</DropdownItem>
79   - <DropdownItem>豆汁儿</DropdownItem>
80   - <DropdownItem>冰糖葫芦</DropdownItem>
81   - <DropdownItem>北京烤鸭</DropdownItem>
82   - </DropdownMenu>
83   - </Dropdown>
84   -
85   - <Dropdown trigger="click" style="margin-left: 20px" placement="left-start" >
86   - <a href="javascript:void(0)">
87   - left-start
88   - <Icon type="arrow-down-b"></Icon>
89   - </a>
90   - <DropdownMenu slot="list">
91   - <DropdownItem>驴打滚</DropdownItem>
92   - <DropdownItem>炸酱面</DropdownItem>
93   - <DropdownItem>豆汁儿</DropdownItem>
94   - <DropdownItem>冰糖葫芦</DropdownItem>
95   - <DropdownItem>北京烤鸭</DropdownItem>
96   - </DropdownMenu>
97   - </Dropdown>
98   -
99   - <Dropdown trigger="click" style="margin-left: 20px" placement="left-end" >
100   - <a href="javascript:void(0)">
101   - left-end
102   - <Icon type="arrow-down-b"></Icon>
103   - </a>
104   - <DropdownMenu slot="list">
105   - <DropdownItem>驴打滚</DropdownItem>
106   - <DropdownItem>炸酱面</DropdownItem>
107   - <DropdownItem>豆汁儿</DropdownItem>
108   - <DropdownItem>冰糖葫芦</DropdownItem>
109   - <DropdownItem>北京烤鸭</DropdownItem>
110   - </DropdownMenu>
111   - </Dropdown>
112   -
113   - <Dropdown trigger="click" style="margin-left: 20px" placement="top" >
114   - <a href="javascript:void(0)">
115   - top
116   - <Icon type="arrow-down-b"></Icon>
117   - </a>
118   - <DropdownMenu slot="list">
119   - <DropdownItem>驴打滚</DropdownItem>
120   - <DropdownItem>炸酱面</DropdownItem>
121   - <DropdownItem>豆汁儿</DropdownItem>
122   - <DropdownItem>冰糖葫芦</DropdownItem>
123   - <DropdownItem>北京烤鸭</DropdownItem>
124   - </DropdownMenu>
125   - </Dropdown>
126   - <Dropdown trigger="click" style="margin-left: 20px" placement="bottom" >
127   - <a href="javascript:void(0)">
128   - bottom
129   - <Icon type="arrow-down-b"></Icon>
130   - </a>
131   - <DropdownMenu slot="list">
132   - <DropdownItem>驴打滚</DropdownItem>
133   - <DropdownItem>炸酱面</DropdownItem>
134   - <DropdownItem>豆汁儿</DropdownItem>
135   - <DropdownItem>冰糖葫芦</DropdownItem>
136   - <DropdownItem>北京烤鸭</DropdownItem>
137   - </DropdownMenu>
138   - </Dropdown>
139   - <Dropdown trigger="click" style="margin-left: 20px" placement="left" >
140   - <a href="javascript:void(0)">
141   - left
142   - <Icon type="arrow-down-b"></Icon>
143   - </a>
144   - <DropdownMenu slot="list">
145   - <DropdownItem>驴打滚</DropdownItem>
146   - <DropdownItem>炸酱面</DropdownItem>
147   - <DropdownItem>豆汁儿</DropdownItem>
148   - <DropdownItem>冰糖葫芦</DropdownItem>
149   - <DropdownItem>北京烤鸭</DropdownItem>
150   - <DropdownItem>驴打滚</DropdownItem>
151   - <DropdownItem>炸酱面</DropdownItem>
152   - <DropdownItem>豆汁儿</DropdownItem>
153   - <DropdownItem>冰糖葫芦</DropdownItem>
154   - <DropdownItem>北京烤鸭</DropdownItem>
155   - <DropdownItem>驴打滚</DropdownItem>
156   - <DropdownItem>炸酱面</DropdownItem>
157   - <DropdownItem>豆汁儿</DropdownItem>
158   - <DropdownItem>冰糖葫芦</DropdownItem>
159   - <DropdownItem>北京烤鸭</DropdownItem>
160   - </DropdownMenu>
161   - </Dropdown>
162   - <Dropdown trigger="click" style="margin-left: 20px" placement="right" >
163   - <a href="javascript:void(0)">
164   - right
165   - <Icon type="arrow-down-b"></Icon>
166   - </a>
167   - <DropdownMenu slot="list">
168   - <DropdownItem>驴打滚</DropdownItem>
169   - <DropdownItem>炸酱面</DropdownItem>
170   - <DropdownItem>豆汁儿</DropdownItem>
171   - <DropdownItem>冰糖葫芦</DropdownItem>
172   - <DropdownItem>北京烤鸭</DropdownItem>
173   - </DropdownMenu>
174   - </Dropdown>
175   - </div>
176   - <br><br><br><br>
177   - <div style='width:600px;height:100px;overflow: auto;border:1px solid'>
178   - <Dropdown trigger="click" style="margin-left: 20px" placement="right-start" >
179   - <a href="javascript:void(0)">
180   - right-start
181   - <Icon type="arrow-down-b"></Icon>
182   - </a>
183   - <DropdownMenu slot="list">
184   - <DropdownItem>驴打滚</DropdownItem>
185   - <DropdownItem>炸酱面</DropdownItem>
186   - <DropdownItem>豆汁儿</DropdownItem>
187   - <DropdownItem>冰糖葫芦</DropdownItem>
188   - <DropdownItem>北京烤鸭</DropdownItem>
189   - </DropdownMenu>
190   - </Dropdown>
191   - <Dropdown trigger="click" style="margin-left: 20px" placement="right-end" >
192   - <a href="javascript:void(0)">
193   - right-end
194   - <Icon type="arrow-down-b"></Icon>
195   - </a>
196   - <DropdownMenu slot="list">
197   - <DropdownItem>驴打滚</DropdownItem>
198   - <DropdownItem>炸酱面</DropdownItem>
199   - <DropdownItem>豆汁儿</DropdownItem>
200   - <DropdownItem>冰糖葫芦</DropdownItem>
201   - <DropdownItem>北京烤鸭</DropdownItem>
202   - </DropdownMenu>
203   - </Dropdown>
204   -
205   - <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-start" >
206   - <a href="javascript:void(0)">
207   - bottom-start
208   - <Icon type="arrow-down-b"></Icon>
209   - </a>
210   - <DropdownMenu slot="list">
211   - <DropdownItem>驴打滚</DropdownItem>
212   - <DropdownItem>炸酱面</DropdownItem>
213   - <DropdownItem>豆汁儿</DropdownItem>
214   - <DropdownItem>冰糖葫芦</DropdownItem>
215   - <DropdownItem>北京烤鸭</DropdownItem>
216   - </DropdownMenu>
217   - </Dropdown>
218   - <Dropdown trigger="click" style="margin-left: 20px" placement="bottom-end" >
219   - <a href="javascript:void(0)">
220   - bottom-end
221   - <Icon type="arrow-down-b"></Icon>
222   - </a>
223   - <DropdownMenu slot="list">
224   - <DropdownItem>驴打滚</DropdownItem>
225   - <DropdownItem>炸酱面</DropdownItem>
226   - <DropdownItem>豆汁儿</DropdownItem>
227   - <DropdownItem>冰糖葫芦</DropdownItem>
228   - <DropdownItem>北京烤鸭</DropdownItem>
229   - </DropdownMenu>
230   - </Dropdown>
231   -
232   - <Dropdown trigger="click" style="margin-left: 20px" placement="top-start" >
233   - <a href="javascript:void(0)">
234   - top-start
235   - <Icon type="arrow-down-b"></Icon>
236   - </a>
237   - <DropdownMenu slot="list">
238   - <DropdownItem>驴打滚</DropdownItem>
239   - <DropdownItem>炸酱面</DropdownItem>
240   - <DropdownItem>豆汁儿</DropdownItem>
241   - <DropdownItem>冰糖葫芦</DropdownItem>
242   - <DropdownItem>北京烤鸭</DropdownItem>
243   - </DropdownMenu>
244   - </Dropdown>
245   - <Dropdown trigger="click" style="margin-left: 20px" placement="top-end" >
246   - <a href="javascript:void(0)">
247   - top-end
248   - <Icon type="arrow-down-b"></Icon>
249   - </a>
250   - <DropdownMenu slot="list">
251   - <DropdownItem>驴打滚</DropdownItem>
252   - <DropdownItem>炸酱面</DropdownItem>
253   - <DropdownItem>豆汁儿</DropdownItem>
254   - <DropdownItem>冰糖葫芦</DropdownItem>
255   - <DropdownItem>北京烤鸭</DropdownItem>
256   - </DropdownMenu>
257   - </Dropdown>
258   -
259   - <Dropdown trigger="click" style="margin-left: 20px" placement="left-start" >
260   - <a href="javascript:void(0)">
261   - left-start
262   - <Icon type="arrow-down-b"></Icon>
263   - </a>
264   - <DropdownMenu slot="list">
265   - <DropdownItem>驴打滚</DropdownItem>
266   - <DropdownItem>炸酱面</DropdownItem>
267   - <DropdownItem>豆汁儿</DropdownItem>
268   - <DropdownItem>冰糖葫芦</DropdownItem>
269   - <DropdownItem>北京烤鸭</DropdownItem>
270   - </DropdownMenu>
271   - </Dropdown>
272   -
273   - <Dropdown trigger="click" style="margin-left: 20px" placement="left-end" >
274   - <a href="javascript:void(0)">
275   - left-end
276   - <Icon type="arrow-down-b"></Icon>
277   - </a>
278   - <DropdownMenu slot="list">
279   - <DropdownItem>驴打滚</DropdownItem>
280   - <DropdownItem>炸酱面</DropdownItem>
281   - <DropdownItem>豆汁儿</DropdownItem>
282   - <DropdownItem>冰糖葫芦</DropdownItem>
283   - <DropdownItem>北京烤鸭</DropdownItem>
284   - </DropdownMenu>
285   - </Dropdown>
286   -
287   - <Dropdown trigger="click" style="margin-left: 20px" placement="top" >
288   - <a href="javascript:void(0)">
289   - top
290   - <Icon type="arrow-down-b"></Icon>
291   - </a>
292   - <DropdownMenu slot="list">
293   - <DropdownItem>驴打滚</DropdownItem>
294   - <DropdownItem>炸酱面</DropdownItem>
295   - <DropdownItem>豆汁儿</DropdownItem>
296   - <DropdownItem>冰糖葫芦</DropdownItem>
297   - <DropdownItem>北京烤鸭</DropdownItem>
298   - </DropdownMenu>
299   - </Dropdown>
300   - <Dropdown trigger="click" style="margin-left: 20px" placement="bottom" >
301   - <a href="javascript:void(0)">
302   - bottom
303   - <Icon type="arrow-down-b"></Icon>
304   - </a>
305   - <DropdownMenu slot="list">
306   - <DropdownItem>驴打滚</DropdownItem>
307   - <DropdownItem>炸酱面</DropdownItem>
308   - <DropdownItem>豆汁儿</DropdownItem>
309   - <DropdownItem>冰糖葫芦</DropdownItem>
310   - <DropdownItem>北京烤鸭</DropdownItem>
311   - </DropdownMenu>
312   - </Dropdown>
313   - <Dropdown trigger="click" style="margin-left: 20px" placement="left" >
314   - <a href="javascript:void(0)">
315   - left
316   - <Icon type="arrow-down-b"></Icon>
317   - </a>
318   - <DropdownMenu slot="list">
319   - <DropdownItem>驴打滚</DropdownItem>
320   - <DropdownItem>炸酱面</DropdownItem>
321   - <DropdownItem>豆汁儿</DropdownItem>
322   - <DropdownItem>冰糖葫芦</DropdownItem>
323   - <DropdownItem>北京烤鸭</DropdownItem>
324   - <DropdownItem>驴打滚</DropdownItem>
325   - <DropdownItem>炸酱面</DropdownItem>
326   - <DropdownItem>豆汁儿</DropdownItem>
327   - <DropdownItem>冰糖葫芦</DropdownItem>
328   - <DropdownItem>北京烤鸭</DropdownItem>
329   - <DropdownItem>驴打滚</DropdownItem>
330   - <DropdownItem>炸酱面</DropdownItem>
331   - <DropdownItem>豆汁儿</DropdownItem>
332   - <DropdownItem>冰糖葫芦</DropdownItem>
333   - <DropdownItem>北京烤鸭</DropdownItem>
334   - </DropdownMenu>
335   - </Dropdown>
336   - <Dropdown trigger="click" style="margin-left: 20px" placement="right" >
337   - <a href="javascript:void(0)">
338   - right
339   - <Icon type="arrow-down-b"></Icon>
340   - </a>
341   - <DropdownMenu slot="list">
342   - <DropdownItem>驴打滚</DropdownItem>
343   - <DropdownItem>炸酱面</DropdownItem>
344   - <DropdownItem>豆汁儿</DropdownItem>
345   - <DropdownItem>冰糖葫芦</DropdownItem>
346   - <DropdownItem>北京烤鸭</DropdownItem>
347   - </DropdownMenu>
348   - </Dropdown>
349   - </div>
  3 + <Dropdown trigger="hover">
  4 + <a href="javascript:void(0)">
  5 + 下拉菜单
  6 + <Icon type="ios-arrow-down"></Icon>
  7 + </a>
  8 + <DropdownMenu slot="list">
  9 + <DropdownItem>驴打滚</DropdownItem>
  10 + <DropdownItem>炸酱面</DropdownItem>
  11 + <DropdownItem disabled>豆汁儿</DropdownItem>
  12 + <DropdownItem>冰糖葫芦</DropdownItem>
  13 + <DropdownItem divided>北京烤鸭</DropdownItem>
  14 + </DropdownMenu>
  15 + </Dropdown>
  16 + <Dropdown trigger="click">
  17 + <a href="javascript:void(0)">
  18 + 下拉菜单
  19 + <Icon type="ios-arrow-down"></Icon>
  20 + </a>
  21 + <DropdownMenu slot="list">
  22 + <DropdownItem>驴打滚</DropdownItem>
  23 + <DropdownItem>炸酱面</DropdownItem>
  24 + <DropdownItem disabled>豆汁儿</DropdownItem>
  25 + <DropdownItem>冰糖葫芦</DropdownItem>
  26 + <DropdownItem divided>北京烤鸭</DropdownItem>
  27 + </DropdownMenu>
  28 + </Dropdown>
  29 + <Dropdown trigger="contextMenu">
  30 + <a href="javascript:void(0)">
  31 + 下拉菜单
  32 + <Icon type="ios-arrow-down"></Icon>
  33 + </a>
  34 + <DropdownMenu slot="list">
  35 + <DropdownItem>驴打滚</DropdownItem>
  36 + <DropdownItem>炸酱面</DropdownItem>
  37 + <DropdownItem disabled>豆汁儿</DropdownItem>
  38 + <DropdownItem>冰糖葫芦</DropdownItem>
  39 + <DropdownItem divided>北京烤鸭</DropdownItem>
  40 + </DropdownMenu>
  41 + </Dropdown>
350 42 </div>
351 43 </template>
352 44 <script>
... ...
src/components/dropdown/dropdown.vue
  Show/Hide comments   View file @eccaa94
... ... @@ -4,7 +4,7 @@
4 4 v-click-outside="onClickoutside"
5 5 @mouseenter="handleMouseenter"
6 6 @mouseleave="handleMouseleave">
7   - <div :class="[prefixCls + '-rel']" ref="reference" @click="handleClick"><slot></slot></div>
  7 + <div :class="relClasses" ref="reference" @click="handleClick" @contextmenu.prevent="handleRightClick"><slot></slot></div>
8 8 <transition name="transition-drop">
9 9 <Drop
10 10 :class="dropdownCls"
... ... @@ -33,7 +33,7 @@
33 33 props: {
34 34 trigger: {
35 35 validator (value) {
36   - return oneOf(value, ['click', 'hover', 'custom']);
  36 + return oneOf(value, ['click', 'hover', 'custom', 'contextMenu']);
37 37 },
38 38 default: 'hover'
39 39 },
... ... @@ -60,6 +60,14 @@
60 60 return {
61 61 [prefixCls + '-transfer']: this.transfer
62 62 };
  63 + },
  64 + relClasses () {
  65 + return [
  66 + `${prefixCls}-rel`,
  67 + {
  68 + [`${prefixCls}-rel-user-select-none`]: this.trigger === 'contextMenu'
  69 + }
  70 + ];
63 71 }
64 72 },
65 73 data () {
... ... @@ -89,6 +97,13 @@
89 97 }
90 98 this.currentVisible = !this.currentVisible;
91 99 },
  100 + handleRightClick () {
  101 + if (this.trigger === 'custom') return false;
  102 + if (this.trigger !== 'contextMenu') {
  103 + return false;
  104 + }
  105 + this.currentVisible = !this.currentVisible;
  106 + },
92 107 handleMouseenter () {
93 108 if (this.trigger === 'custom') return false;
94 109 if (this.trigger !== 'hover') {
... ... @@ -113,6 +128,7 @@
113 128 },
114 129 onClickoutside (e) {
115 130 this.handleClose();
  131 + this.handleRightClose();
116 132 if (this.currentVisible) this.$emit('on-clickoutside', e);
117 133 },
118 134 handleClose () {
... ... @@ -122,6 +138,13 @@
122 138 }
123 139 this.currentVisible = false;
124 140 },
  141 + handleRightClose () {
  142 + if (this.trigger === 'custom') return false;
  143 + if (this.trigger !== 'contextMenu') {
  144 + return false;
  145 + }
  146 + this.currentVisible = false;
  147 + },
125 148 hasParent () {
126 149 // const $parent = this.$parent.$parent.$parent;
127 150 const $parent = findComponentUpward(this, 'Dropdown');
... ...
src/styles/components/dropdown.less
  Show/Hide comments   View file @eccaa94
... ... @@ -16,6 +16,11 @@
16 16 &-rel{
17 17 //display: inline-block;
18 18 position: relative;
  19 + &-user-select-none{
  20 + -webkit-user-select: none;
  21 + -moz-user-select: none;
  22 + user-select: none;
  23 + }
19 24 }
20 25  
21 26 &-menu{
... ...