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
@@ -28,4 +28,9 @@ class 改为了 className @@ -28,4 +28,9 @@ class 改为了 className
28 改名为 iCircle 28 改名为 iCircle
29 ### Tabs 29 ### Tabs
30 废弃 activeKey，改用 value，使用 v-model，key 更名为 name 30 废弃 activeKey，改用 value，使用 v-model，key 更名为 name
31 -### popper.js 将 prop: visible 移至 data 里  
32 \ No newline at end of file 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 \ No newline at end of file 38 \ No newline at end of file
@@ -26,7 +26,7 @@ @@ -26,7 +26,7 @@
26 - [x] Switch 26 - [x] Switch
27 - [ ] Table 27 - [ ] Table
28 - [ ] Select 28 - [ ] Select
29 -- [ ] Slider 29 +- [x] Slider
30 - [ ] DatePicker 30 - [ ] DatePicker
31 - [ ] TimePicker 31 - [ ] TimePicker
32 - [ ] Cascader 32 - [ ] Cascader
@@ -51,7 +51,7 @@ @@ -51,7 +51,7 @@
51 - [x] Tree 51 - [x] Tree
52 - [ ] Menu 52 - [ ] Menu
53 - [x] Tabs 53 - [x] Tabs
54 -- [ ] Dropdown 54 +- [x] Dropdown
55 - [ ] Page 55 - [ ] Page
56 - [ ] Breadcrumb 56 - [ ] Breadcrumb
57 - [x] Steps 57 - [x] Steps
src/components/dropdown/dropdown-item.vue
  Show/Hide comments   View file @b1c118d
@@ -5,8 +5,9 @@ @@ -5,8 +5,9 @@
5 const prefixCls = 'ivu-dropdown-item'; 5 const prefixCls = 'ivu-dropdown-item';
6 6
7 export default { 7 export default {
  8 + name: 'DropdownItem',
8 props: { 9 props: {
9 - key: { 10 + name: {
10 type: [String, Number] 11 type: [String, Number]
11 }, 12 },
12 disabled: { 13 disabled: {
@@ -36,7 +37,7 @@ @@ -36,7 +37,7 @@
36 }, 37 },
37 methods: { 38 methods: {
38 handleClick () { 39 handleClick () {
39 - const $parent = this.$parent.$parent; 40 + const $parent = this.$parent.$parent.$parent;
40 const hasChildren = this.$parent && this.$parent.$options.name === 'Dropdown'; 41 const hasChildren = this.$parent && this.$parent.$options.name === 'Dropdown';
41 42
42 if (this.disabled) { 43 if (this.disabled) {
@@ -50,7 +51,7 @@ @@ -50,7 +51,7 @@
50 $parent.$emit('on-hover-click'); 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,8 +4,10 @@
4 v-clickoutside="handleClose" 4 v-clickoutside="handleClose"
5 @mouseenter="handleMouseenter" 5 @mouseenter="handleMouseenter"
6 @mouseleave="handleMouseleave"> 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 </div> 11 </div>
10 </template> 12 </template>
11 <script> 13 <script>
@@ -44,16 +46,30 @@ @@ -44,16 +46,30 @@
44 }, 46 },
45 data () { 47 data () {
46 return { 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 methods: { 66 methods: {
51 handleClick () { 67 handleClick () {
52 if (this.trigger === 'custom') return false; 68 if (this.trigger === 'custom') return false;
53 if (this.trigger !== 'click') { 69 if (this.trigger !== 'click') {
54 return false; 70 return false;
55 } 71 }
56 - this.visible = !this.visible; 72 + this.currentVisible = !this.currentVisible;
57 }, 73 },
58 handleMouseenter () { 74 handleMouseenter () {
59 if (this.trigger === 'custom') return false; 75 if (this.trigger === 'custom') return false;
@@ -62,7 +78,7 @@ @@ -62,7 +78,7 @@
62 } 78 }
63 clearTimeout(this.timeout); 79 clearTimeout(this.timeout);
64 this.timeout = setTimeout(() => { 80 this.timeout = setTimeout(() => {
65 - this.visible = true; 81 + this.currentVisible = true;
66 }, 250); 82 }, 250);
67 }, 83 },
68 handleMouseleave () { 84 handleMouseleave () {
@@ -72,7 +88,7 @@ @@ -72,7 +88,7 @@
72 } 88 }
73 clearTimeout(this.timeout); 89 clearTimeout(this.timeout);
74 this.timeout = setTimeout(() => { 90 this.timeout = setTimeout(() => {
75 - this.visible = false; 91 + this.currentVisible = false;
76 }, 150); 92 }, 150);
77 }, 93 },
78 handleClose () { 94 handleClose () {
@@ -80,7 +96,7 @@ @@ -80,7 +96,7 @@
80 if (this.trigger !== 'click') { 96 if (this.trigger !== 'click') {
81 return false; 97 return false;
82 } 98 }
83 - this.visible = false; 99 + this.currentVisible = false;
84 }, 100 },
85 hasParent () { 101 hasParent () {
86 const $parent = this.$parent.$parent; 102 const $parent = this.$parent.$parent;
@@ -91,44 +107,63 @@ @@ -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 const $parent = this.hasParent(); 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 const $parent = this.hasParent(); 116 const $parent = this.hasParent();
111 if ($parent) { 117 if ($parent) {
112 this.$nextTick(() => { 118 this.$nextTick(() => {
113 if (this.trigger === 'custom') return false; 119 if (this.trigger === 'custom') return false;
114 - this.visible = false; 120 + this.currentVisible = false;
115 }); 121 });
116 $parent.$emit('on-hover-click'); 122 $parent.$emit('on-hover-click');
117 } else { 123 } else {
118 this.$nextTick(() => { 124 this.$nextTick(() => {
119 if (this.trigger === 'custom') return false; 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 this.$nextTick(() => { 131 this.$nextTick(() => {
126 if (this.trigger === 'custom') return false; 132 if (this.trigger === 'custom') return false;
127 - this.visible = true; 133 + this.currentVisible = true;
128 }); 134 });
129 const $parent = this.hasParent(); 135 const $parent = this.hasParent();
130 if ($parent) $parent.$emit('on-haschild-click'); 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 </script> 169 </script>
src/components/select/dropdown.vue
  Show/Hide comments   View file @b1c118d
@@ -15,7 +15,7 @@ @@ -15,7 +15,7 @@
15 data () { 15 data () {
16 return { 16 return {
17 popper: null, 17 popper: null,
18 - width: '', 18 + width: ''
19 }; 19 };
20 }, 20 },
21 computed: { 21 computed: {
@@ -33,7 +33,7 @@ @@ -33,7 +33,7 @@
33 }); 33 });
34 } else { 34 } else {
35 this.$nextTick(() => { 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 gpuAcceleration: false, 37 gpuAcceleration: false,
38 placement: this.placement, 38 placement: this.placement,
39 boundariesPadding: 0, 39 boundariesPadding: 0,
@@ -66,7 +66,7 @@ @@ -66,7 +66,7 @@
66 popper._popper.style.transformOrigin = `center ${ origin }`; 66 popper._popper.style.transformOrigin = `center ${ origin }`;
67 } 67 }
68 }, 68 },
69 - compiled () { 69 + created () {
70 this.$on('on-update-popper', this.update); 70 this.$on('on-update-popper', this.update);
71 this.$on('on-destroy-popper', this.destroy); 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,6 +52,7 @@
52 const prefixCls = 'ivu-slider'; 52 const prefixCls = 'ivu-slider';
53 53
54 export default { 54 export default {
  55 + name: 'Slider',
55 components: { InputNumber, Tooltip }, 56 components: { InputNumber, Tooltip },
56 props: { 57 props: {
57 min: { 58 min: {
@@ -14,7 +14,7 @@ import Checkbox from &#39;./components/checkbox&#39;; @@ -14,7 +14,7 @@ import Checkbox from &#39;./components/checkbox&#39;;
14 import Circle from './components/circle'; 14 import Circle from './components/circle';
15 import Collapse from './components/collapse'; 15 import Collapse from './components/collapse';
16 // import DatePicker from './components/date-picker'; 16 // import DatePicker from './components/date-picker';
17 -// import Dropdown from './components/dropdown'; 17 +import Dropdown from './components/dropdown';
18 // import Form from './components/form'; 18 // import Form from './components/form';
19 import Icon from './components/icon'; 19 import Icon from './components/icon';
20 import Input from './components/input'; 20 import Input from './components/input';
@@ -64,9 +64,9 @@ const iview = { @@ -64,9 +64,9 @@ const iview = {
64 CheckboxGroup: Checkbox.Group, 64 CheckboxGroup: Checkbox.Group,
65 iCircle: Circle, 65 iCircle: Circle,
66 // DatePicker, 66 // DatePicker,
67 - // Dropdown,  
68 - // DropdownItem: Dropdown.Item,  
69 - // DropdownMenu: Dropdown.Menu, 67 + Dropdown,
  68 + DropdownItem: Dropdown.Item,
  69 + DropdownMenu: Dropdown.Menu,
70 // iForm: Form, 70 // iForm: Form,
71 // FormItem: Form.Item, 71 // FormItem: Form.Item,
72 iCol: Col, 72 iCol: Col,
@@ -38,6 +38,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; } @@ -38,6 +38,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
38 <li><router-link to="/tooltip">Tooltip</router-link></li> 38 <li><router-link to="/tooltip">Tooltip</router-link></li>
39 <li><router-link to="/poptip">Poptip</router-link></li> 39 <li><router-link to="/poptip">Poptip</router-link></li>
40 <li><router-link to="/slider">Slider</router-link></li> 40 <li><router-link to="/slider">Slider</router-link></li>
  41 + <li><router-link to="/dropdown">Dropdown</router-link></li>
41 </ul> 42 </ul>
42 </nav> 43 </nav>
43 <router-view></router-view> 44 <router-view></router-view>
@@ -116,6 +116,10 @@ const router = new VueRouter({ @@ -116,6 +116,10 @@ const router = new VueRouter({
116 { 116 {
117 path: '/slider', 117 path: '/slider',
118 component: require('./routers/slider.vue') 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 <template> 1 <template>
2 - <Dropdown trigger="click"> 2 + <Dropdown>
3 <a href="javascript:void(0)"> 3 <a href="javascript:void(0)">
4 北京小吃 4 北京小吃
5 <Icon type="arrow-down-b"></Icon> 5 <Icon type="arrow-down-b"></Icon>
@@ -24,10 +24,6 @@ @@ -24,10 +24,6 @@
24 </template> 24 </template>
25 <script> 25 <script>
26 export default { 26 export default {
27 - methods: {  
28 - v (data) {  
29 - console.log(data)  
30 - }  
31 - } 27 +
32 } 28 }
33 </script> 29 </script>