other / mew-iview

Commit 745bcbc25eb0318d89bb8ca9af15b8cebf0b882f

Authored by 梁灏
1 parent 79633f3c

update Dropdown 

update Dropdown
Showing 3 changed files with 53 additions and 27 deletions   Show diff stats
Inline Side-by-side
src/components/dropdown/dropdown.vue
  Show/Hide comments   View file @745bcbc
@@ -6,7 +6,7 @@ @@ -6,7 +6,7 @@
6 @mouseleave="handleMouseleave" 6 @mouseleave="handleMouseleave"
7 v-clickoutside="handleClose"> 7 v-clickoutside="handleClose">
8 <div :class="[prefixCls-rel]" v-el:reference><slot></slot></div> 8 <div :class="[prefixCls-rel]" v-el:reference><slot></slot></div>
9 - <Drop v-show="visible" :placement="placement" transition="slide-up"><slot name="list"></slot></Drop> 9 + <Drop v-show="visible" :placement="placement" transition="slide-up" v-ref:drop><slot name="list"></slot></Drop>
10 </div> 10 </div>
11 </template> 11 </template>
12 <script> 12 <script>
@@ -17,6 +17,7 @@ @@ -17,6 +17,7 @@
17 const prefixCls = 'ivu-dropdown'; 17 const prefixCls = 'ivu-dropdown';
18 18
19 export default { 19 export default {
  20 + name: 'Dropdown',
20 directives: { clickoutside }, 21 directives: { clickoutside },
21 components: { Drop }, 22 components: { Drop },
22 props: { 23 props: {
@@ -26,11 +27,11 @@ @@ -26,11 +27,11 @@
26 }, 27 },
27 default: 'hover' 28 default: 'hover'
28 }, 29 },
29 - align: { 30 + placement: {
30 validator (value) { 31 validator (value) {
31 - return oneOf(value, ['left', 'center', 'right']); 32 + return oneOf(value, ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']);
32 }, 33 },
33 - default: 'center' 34 + default: 'bottom'
34 } 35 }
35 }, 36 },
36 data () { 37 data () {
@@ -39,11 +40,6 @@ @@ -39,11 +40,6 @@
39 visible: false 40 visible: false
40 } 41 }
41 }, 42 },
42 - computed: {  
43 - placement () {  
44 - return this.align === 'left' ? 'bottom-start' : this.align === 'center' ? 'bottom' : 'bottom-end';  
45 - }  
46 - },  
47 methods: { 43 methods: {
48 handleClick () { 44 handleClick () {
49 if (this.trigger !== 'click') { 45 if (this.trigger !== 'click') {
@@ -79,9 +75,17 @@ @@ -79,9 +75,17 @@
79 watch: { 75 watch: {
80 visible (val) { 76 visible (val) {
81 if (val) { 77 if (val) {
82 - this.$broadcast('on-update-popper'); 78 + this.$refs.drop.update();
83 } else { 79 } else {
84 - this.$broadcast('on-destroy-popper'); 80 + this.$refs.drop.destroy();
  81 + }
  82 + }
  83 + },
  84 + events: {
  85 + 'on-click' (key) {
  86 + const $parent = this.$parent.$parent;
  87 + if ($parent && $parent.$options.name === 'Dropdown') {
  88 + $parent.$emit('on-click', key);
85 } 89 }
86 } 90 }
87 } 91 }
src/styles/components/dropdown.less
  Show/Hide comments   View file @745bcbc
@@ -5,6 +5,13 @@ @@ -5,6 +5,13 @@
5 display: inline-block; 5 display: inline-block;
6 position: relative; 6 position: relative;
7 7
  8 + .@{select-dropdown-prefix-cls} {
  9 + overflow: visible;
  10 + }
  11 + .@{dropdown-prefix-cls} {
  12 + width: 100%;
  13 + }
  14 +
8 &-rel{ 15 &-rel{
9 display: inline-block; 16 display: inline-block;
10 } 17 }
test/routers/dropdown.vue
  Show/Hide comments   View file @745bcbc
1 <template> 1 <template>
2 - <Dropdown>  
3 - <a href="javascript:void(0)">  
4 - hover 触发  
5 - <Icon type="arrow-down-b"></Icon>  
6 - </a>  
7 - <Dropdown-menu slot="list">  
8 - <Dropdown-item>驴打滚</Dropdown-item>  
9 - <Dropdown-item>炸酱面</Dropdown-item>  
10 - <Dropdown-item>豆汁儿</Dropdown-item>  
11 - <Dropdown-item>冰糖葫芦</Dropdown-item>  
12 - <Dropdown-item>北京烤鸭</Dropdown-item>  
13 - </Dropdown-menu>  
14 - </Dropdown>  
15 - <Dropdown trigger="click" style="margin-left: 20px"> 2 + <Dropdown trigger="click" @on-click="click" style="margin-left: 20px">
16 <a href="javascript:void(0)"> 3 <a href="javascript:void(0)">
17 click 触发 4 click 触发
18 <Icon type="arrow-down-b"></Icon> 5 <Icon type="arrow-down-b"></Icon>
19 </a> 6 </a>
20 <Dropdown-menu slot="list"> 7 <Dropdown-menu slot="list">
21 <Dropdown-item>驴打滚</Dropdown-item> 8 <Dropdown-item>驴打滚</Dropdown-item>
22 - <Dropdown-item>炸酱面</Dropdown-item> 9 + <Dropdown placement="right-start">
  10 + <Dropdown-item>
  11 + 炸酱面
  12 + <Icon type="arrow-right-b"></Icon>
  13 + </Dropdown-item>
  14 + <Dropdown-menu slot="list">
  15 + <Dropdown-item>驴打滚</Dropdown-item>
  16 + <Dropdown-item>炸酱面</Dropdown-item>
  17 + <Dropdown-item>豆汁儿</Dropdown-item>
  18 + <Dropdown placement="right-start">
  19 + <Dropdown-item>
  20 + 冰糖葫芦
  21 + <Icon type="arrow-right-b"></Icon>
  22 + </Dropdown-item>
  23 + <Dropdown-menu slot="list">
  24 + <Dropdown-item>驴打滚</Dropdown-item>
  25 + <Dropdown-item key="123">炸酱面</Dropdown-item>
  26 + <Dropdown-item>豆汁儿</Dropdown-item>
  27 + <Dropdown-item>冰糖葫芦</Dropdown-item>
  28 + <Dropdown-item>北京烤鸭</Dropdown-item>
  29 + </Dropdown-menu>
  30 + </Dropdown>
  31 + <Dropdown-item>北京烤鸭</Dropdown-item>
  32 + </Dropdown-menu>
  33 + </Dropdown>
23 <Dropdown-item>豆汁儿</Dropdown-item> 34 <Dropdown-item>豆汁儿</Dropdown-item>
24 <Dropdown-item>冰糖葫芦</Dropdown-item> 35 <Dropdown-item>冰糖葫芦</Dropdown-item>
25 <Dropdown-item>北京烤鸭</Dropdown-item> 36 <Dropdown-item>北京烤鸭</Dropdown-item>
@@ -28,6 +39,10 @@ @@ -28,6 +39,10 @@
28 </template> 39 </template>
29 <script> 40 <script>
30 export default { 41 export default {
31 - 42 + methods: {
  43 + click (data) {
  44 + console.log(data)
  45 + }
  46 + }
32 } 47 }
33 </script> 48 </script>