other / mew-iview

Commit b1c118d85e0d93e38d09863d8ee94b01c302102b

Authored by 梁灏
1 parent 1c803cdf

support Dropdown 

support Dropdown
Showing 10 changed files with 91 additions and 48 deletions   Show diff stats
Inline Side-by-side
CHANGE.md
  Show/Hide comments   View file @b1c118d
... ... @@ -28,4 +28,9 @@ class 改为了 className
28 28 改名为 iCircle
29 29 ### Tabs
30 30 废弃 activeKey，改用 value，使用 v-model，key 更名为 name
31   -### popper.js 将 prop: visible 移至 data 里
32 31 \ No newline at end of file
  32 +### popper.js 将 prop: visible 移至 data 里
  33 +### Slider
  34 +支持 v-model
  35 +### Dropdown
  36 +DropdownItem key 改为 name, Dropdown 的 visible 要使用 @on-visible-change 捕获，不再 sync
  37 +DropdownItem 里，this.$parent.$parent 与1.0 有区别
33 38 \ No newline at end of file
... ...
README.md
  Show/Hide comments   View file @b1c118d
... ... @@ -26,7 +26,7 @@
26 26 - [x] Switch
27 27 - [ ] Table
28 28 - [ ] Select
29   -- [ ] Slider
  29 +- [x] Slider
30 30 - [ ] DatePicker
31 31 - [ ] TimePicker
32 32 - [ ] Cascader
... ... @@ -51,7 +51,7 @@
51 51 - [x] Tree
52 52 - [ ] Menu
53 53 - [x] Tabs
54   -- [ ] Dropdown
  54 +- [x] Dropdown
55 55 - [ ] Page
56 56 - [ ] Breadcrumb
57 57 - [x] Steps
... ...
src/components/dropdown/dropdown-item.vue
  Show/Hide comments   View file @b1c118d
... ... @@ -5,8 +5,9 @@
5 5 const prefixCls = 'ivu-dropdown-item';
6 6  
7 7 export default {
  8 + name: 'DropdownItem',
8 9 props: {
9   - key: {
  10 + name: {
10 11 type: [String, Number]
11 12 },
12 13 disabled: {
... ... @@ -36,7 +37,7 @@
36 37 },
37 38 methods: {
38 39 handleClick () {
39   - const $parent = this.$parent.$parent;
  40 + const $parent = this.$parent.$parent.$parent;
40 41 const hasChildren = this.$parent && this.$parent.$options.name === 'Dropdown';
41 42  
42 43 if (this.disabled) {
... ... @@ -50,7 +51,7 @@
50 51 $parent.$emit('on-hover-click');
51 52 }
52 53 }
53   - $parent.$emit('on-click', this.key);
  54 + $parent.$emit('on-click', this.name);
54 55 }
55 56 }
56 57 };
... ...
src/components/dropdown/dropdown.vue
  Show/Hide comments   View file @b1c118d
... ... @@ -4,8 +4,10 @@
4 4 v-clickoutside="handleClose"
5 5 @mouseenter="handleMouseenter"
6 6 @mouseleave="handleMouseleave">
7   - <div :class="[prefixCls-rel]" v-el:reference @click="handleClick"><slot></slot></div>
8   - <Drop v-show="visible" :placement="placement" :transition="transition" v-ref:drop><slot name="list"></slot></Drop>
  7 + <div :class="[prefixCls + '-rel']" ref="reference" @click="handleClick"><slot></slot></div>
  8 + <transition :name="transition">
  9 + <Drop v-show="currentVisible" :placement="placement" ref="drop"><slot name="list"></slot></Drop>
  10 + </transition>
9 11 </div>
10 12 </template>
11 13 <script>
... ... @@ -44,16 +46,30 @@
44 46 },
45 47 data () {
46 48 return {
47   - prefixCls: prefixCls
  49 + prefixCls: prefixCls,
  50 + currentVisible: this.visible
48 51 };
49 52 },
  53 + watch: {
  54 + visible (val) {
  55 + this.currentVisible = val;
  56 + },
  57 + currentVisible (val) {
  58 + if (val) {
  59 + this.$refs.drop.update();
  60 + } else {
  61 + this.$refs.drop.destroy();
  62 + }
  63 + this.$emit('on-visible-change', val);
  64 + }
  65 + },
50 66 methods: {
51 67 handleClick () {
52 68 if (this.trigger === 'custom') return false;
53 69 if (this.trigger !== 'click') {
54 70 return false;
55 71 }
56   - this.visible = !this.visible;
  72 + this.currentVisible = !this.currentVisible;
57 73 },
58 74 handleMouseenter () {
59 75 if (this.trigger === 'custom') return false;
... ... @@ -62,7 +78,7 @@
62 78 }
63 79 clearTimeout(this.timeout);
64 80 this.timeout = setTimeout(() => {
65   - this.visible = true;
  81 + this.currentVisible = true;
66 82 }, 250);
67 83 },
68 84 handleMouseleave () {
... ... @@ -72,7 +88,7 @@
72 88 }
73 89 clearTimeout(this.timeout);
74 90 this.timeout = setTimeout(() => {
75   - this.visible = false;
  91 + this.currentVisible = false;
76 92 }, 150);
77 93 },
78 94 handleClose () {
... ... @@ -80,7 +96,7 @@
80 96 if (this.trigger !== 'click') {
81 97 return false;
82 98 }
83   - this.visible = false;
  99 + this.currentVisible = false;
84 100 },
85 101 hasParent () {
86 102 const $parent = this.$parent.$parent;
... ... @@ -91,44 +107,63 @@
91 107 }
92 108 }
93 109 },
94   - watch: {
95   - visible (val) {
96   - if (val) {
97   - this.$refs.drop.update();
98   - } else {
99   - this.$refs.drop.destroy();
100   - }
101   - this.$emit('on-visible-change', val);
102   - }
103   - },
104   - events: {
105   - 'on-click' (key) {
  110 + mounted () {
  111 + this.$on('on-click', (key) => {
106 112 const $parent = this.hasParent();
107   - if ($parent ) $parent.$emit('on-click', key);
108   - },
109   - 'on-hover-click' () {
  113 + if ($parent) $parent.$emit('on-click', key);
  114 + });
  115 + this.$on('on-hover-click', () => {
110 116 const $parent = this.hasParent();
111 117 if ($parent) {
112 118 this.$nextTick(() => {
113 119 if (this.trigger === 'custom') return false;
114   - this.visible = false;
  120 + this.currentVisible = false;
115 121 });
116 122 $parent.$emit('on-hover-click');
117 123 } else {
118 124 this.$nextTick(() => {
119 125 if (this.trigger === 'custom') return false;
120   - this.visible = false;
  126 + this.currentVisible = false;
121 127 });
122 128 }
123   - },
124   - 'on-haschild-click' () {
  129 + });
  130 + this.$on('on-haschild-click', () => {
125 131 this.$nextTick(() => {
126 132 if (this.trigger === 'custom') return false;
127   - this.visible = true;
  133 + this.currentVisible = true;
128 134 });
129 135 const $parent = this.hasParent();
130 136 if ($parent) $parent.$emit('on-haschild-click');
131   - }
132   - }
  137 + });
  138 + },
  139 +// events: {
  140 +// 'on-click' (key) {
  141 +// const $parent = this.hasParent();
  142 +// if ($parent ) $parent.$emit('on-click', key);
  143 +// },
  144 +// 'on-hover-click' () {
  145 +// const $parent = this.hasParent();
  146 +// if ($parent) {
  147 +// this.$nextTick(() => {
  148 +// if (this.trigger === 'custom') return false;
  149 +// this.currentVisible = false;
  150 +// });
  151 +// $parent.$emit('on-hover-click');
  152 +// } else {
  153 +// this.$nextTick(() => {
  154 +// if (this.trigger === 'custom') return false;
  155 +// this.currentVisible = false;
  156 +// });
  157 +// }
  158 +// },
  159 +// 'on-haschild-click' () {
  160 +// this.$nextTick(() => {
  161 +// if (this.trigger === 'custom') return false;
  162 +// this.currentVisible = true;
  163 +// });
  164 +// const $parent = this.hasParent();
  165 +// if ($parent) $parent.$emit('on-haschild-click');
  166 +// }
  167 +// }
133 168 };
134 169 </script>
... ...
src/components/select/dropdown.vue
  Show/Hide comments   View file @b1c118d
... ... @@ -15,7 +15,7 @@
15 15 data () {
16 16 return {
17 17 popper: null,
18   - width: '',
  18 + width: ''
19 19 };
20 20 },
21 21 computed: {
... ... @@ -33,7 +33,7 @@
33 33 });
34 34 } else {
35 35 this.$nextTick(() => {
36   - this.popper = new Popper(this.$parent.$els.reference, this.$el, {
  36 + this.popper = new Popper(this.$parent.$refs.reference, this.$el, {
37 37 gpuAcceleration: false,
38 38 placement: this.placement,
39 39 boundariesPadding: 0,
... ... @@ -66,7 +66,7 @@
66 66 popper._popper.style.transformOrigin = `center ${ origin }`;
67 67 }
68 68 },
69   - compiled () {
  69 + created () {
70 70 this.$on('on-update-popper', this.update);
71 71 this.$on('on-destroy-popper', this.destroy);
72 72 },
... ...
src/components/slider/slider.vue
  Show/Hide comments   View file @b1c118d
... ... @@ -52,6 +52,7 @@
52 52 const prefixCls = 'ivu-slider';
53 53  
54 54 export default {
  55 + name: 'Slider',
55 56 components: { InputNumber, Tooltip },
56 57 props: {
57 58 min: {
... ...
src/index.js
  Show/Hide comments   View file @b1c118d
... ... @@ -14,7 +14,7 @@ import Checkbox from &#39;./components/checkbox&#39;;
14 14 import Circle from './components/circle';
15 15 import Collapse from './components/collapse';
16 16 // import DatePicker from './components/date-picker';
17   -// import Dropdown from './components/dropdown';
  17 +import Dropdown from './components/dropdown';
18 18 // import Form from './components/form';
19 19 import Icon from './components/icon';
20 20 import Input from './components/input';
... ... @@ -64,9 +64,9 @@ const iview = {
64 64 CheckboxGroup: Checkbox.Group,
65 65 iCircle: Circle,
66 66 // DatePicker,
67   - // Dropdown,
68   - // DropdownItem: Dropdown.Item,
69   - // DropdownMenu: Dropdown.Menu,
  67 + Dropdown,
  68 + DropdownItem: Dropdown.Item,
  69 + DropdownMenu: Dropdown.Menu,
70 70 // iForm: Form,
71 71 // FormItem: Form.Item,
72 72 iCol: Col,
... ...
test/app.vue
  Show/Hide comments   View file @b1c118d
... ... @@ -38,6 +38,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
38 38 <li><router-link to="/tooltip">Tooltip</router-link></li>
39 39 <li><router-link to="/poptip">Poptip</router-link></li>
40 40 <li><router-link to="/slider">Slider</router-link></li>
  41 + <li><router-link to="/dropdown">Dropdown</router-link></li>
41 42 </ul>
42 43 </nav>
43 44 <router-view></router-view>
... ...
test/main.js
  Show/Hide comments   View file @b1c118d
... ... @@ -116,6 +116,10 @@ const router = new VueRouter({
116 116 {
117 117 path: '/slider',
118 118 component: require('./routers/slider.vue')
  119 + },
  120 + {
  121 + path: '/dropdown',
  122 + component: require('./routers/dropdown.vue')
119 123 }
120 124 ]
121 125 });
... ...
test/routers/dropdown.vue
  Show/Hide comments   View file @b1c118d
1 1 <template>
2   - <Dropdown trigger="click">
  2 + <Dropdown>
3 3 <a href="javascript:void(0)">
4 4 北京小吃
5 5 <Icon type="arrow-down-b"></Icon>
... ... @@ -24,10 +24,6 @@
24 24 </template>
25 25 <script>
26 26 export default {
27   - methods: {
28   - v (data) {
29   - console.log(data)
30   - }
31   - }
  27 +
32 28 }
33 29 </script>
... ...