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 6 @mouseleave="handleMouseleave"
7 7 v-clickoutside="handleClose">
8 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 10 </div>
11 11 </template>
12 12 <script>
... ... @@ -17,6 +17,7 @@
17 17 const prefixCls = 'ivu-dropdown';
18 18  
19 19 export default {
  20 + name: 'Dropdown',
20 21 directives: { clickoutside },
21 22 components: { Drop },
22 23 props: {
... ... @@ -26,11 +27,11 @@
26 27 },
27 28 default: 'hover'
28 29 },
29   - align: {
  30 + placement: {
30 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 37 data () {
... ... @@ -39,11 +40,6 @@
39 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 43 methods: {
48 44 handleClick () {
49 45 if (this.trigger !== 'click') {
... ... @@ -79,9 +75,17 @@
79 75 watch: {
80 76 visible (val) {
81 77 if (val) {
82   - this.$broadcast('on-update-popper');
  78 + this.$refs.drop.update();
83 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 5 display: inline-block;
6 6 position: relative;
7 7  
  8 + .@{select-dropdown-prefix-cls} {
  9 + overflow: visible;
  10 + }
  11 + .@{dropdown-prefix-cls} {
  12 + width: 100%;
  13 + }
  14 +
8 15 &-rel{
9 16 display: inline-block;
10 17 }
... ...
test/routers/dropdown.vue
  Show/Hide comments   View file @745bcbc
1 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 3 <a href="javascript:void(0)">
17 4 click 触发
18 5 <Icon type="arrow-down-b"></Icon>
19 6 </a>
20 7 <Dropdown-menu slot="list">
21 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 34 <Dropdown-item>豆汁儿</Dropdown-item>
24 35 <Dropdown-item>冰糖葫芦</Dropdown-item>
25 36 <Dropdown-item>北京烤鸭</Dropdown-item>
... ... @@ -28,6 +39,10 @@
28 39 </template>
29 40 <script>
30 41 export default {
31   -
  42 + methods: {
  43 + click (data) {
  44 + console.log(data)
  45 + }
  46 + }
32 47 }
33 48 </script>
... ...