forked from youzan/vant
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.js
More file actions
112 lines (102 loc) · 2.33 KB
/
index.js
File metadata and controls
112 lines (102 loc) · 2.33 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
import { createNamespace } from '../utils';
import { BLUE, BORDER_TOP_BOTTOM } from '../utils/constant';
import { ParentMixin } from '../mixins/relation';
import { ClickOutsideMixin } from '../mixins/click-outside';
const [createComponent, bem] = createNamespace('dropdown-menu');
export default createComponent({
mixins: [
ParentMixin('vanDropdownMenu'),
ClickOutsideMixin({
event: 'click',
method: 'onClickOutside'
})
],
props: {
overlay: {
type: Boolean,
default: true
},
zIndex: {
type: Number,
default: 10
},
duration: {
type: Number,
default: 0.2
},
direction: {
type: String,
default: 'down'
},
activeColor: {
type: String,
default: BLUE
},
closeOnClickOverlay: {
type: Boolean,
default: true
}
},
data() {
return {
offset: 0
};
},
methods: {
updateOffset() {
const { menu } = this.$refs;
const rect = menu.getBoundingClientRect();
if (this.direction === 'down') {
this.offset = rect.bottom;
} else {
this.offset = window.innerHeight - rect.top;
}
},
toggleItem(active) {
this.children.forEach((item, index) => {
if (index === active) {
item.toggle();
} else if (item.showPopup) {
item.toggle(false, { immediate: true });
}
});
},
onClickOutside() {
this.children.forEach(item => {
item.toggle(false);
});
}
},
render() {
const Titles = this.children.map((item, index) => (
<div
role="button"
tabindex={item.disabled ? -1 : 0}
class={bem('item', { disabled: item.disabled })}
onClick={() => {
if (!item.disabled) {
this.toggleItem(index);
}
}}
>
<span
class={[
bem('title', {
down: item.showPopup === (this.direction === 'down')
}),
item.titleClass
]}
style={{ color: item.showPopup ? this.activeColor : '' }}
>
<div class="van-ellipsis">{item.displayTitle}</div>
</span>
</div>
));
return (
<div ref="menu" class={[bem(), BORDER_TOP_BOTTOM]}>
{Titles}
{this.slots('default')}
</div>
);
}
});