3a3ecabe
 Imshann
init
|
1
|
import template from "./Select.html";
|
|
dd962f77
Imshann
优化
|
2
3
|
import style from "antd/lib/select/style/index.css";
|
|
3a3ecabe
Imshann
init
|
4
5
|
class Select {
|
|
dd962f77
Imshann
优化
|
6
7
8
|
useModules = ["$compile", "$timeout", "esNgAntd"];
|
|
3a3ecabe
Imshann
init
|
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
props = {
value: String,
placeholder: String,
onChange: Function,
placeholder: String,
getPopupContainer: Function,
};
state = {
open: false,
childrens: [],
label: null,
value: null,
popup: null,
};
template = template;
|
|
dd962f77
Imshann
优化
|
27
28
29
30
31
|
constructor(esForm, esFormItem) {
esNgAntd.createStyle("ant-select", style);
this.esForm = esForm.getContext();
this.esFormItem = esFormItem.getContext();
this.esForm.state.formItems.push($scope);
|
|
3a3ecabe
Imshann
init
|
32
33
34
|
let option = this.state.childrens.find(function (option) {
return option.value === this.props.value;
});
|
|
dd962f77
Imshann
优化
|
35
36
37
|
if (option) {
this.state.label = option.label;
}
|
|
3a3ecabe
Imshann
init
|
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
|
}
addOption(option) {
this.state.childrens.push(option);
}
handleClick(option) {
this.state.open = !this.state.open;
this.state.label = option.label;
this.state.value = option.value;
this.props.onChange({
value: this.state.value,
});
}
getOffset(ele) {
if (!ele || ele.nodeType != 1) {
return;
}
let func = this.props.getPopupContainer();
if (typeof func === "function" && func() !== undefined) {
return {
top: $element[0].offsetTop,
left: $element[0].offsetLeft,
};
} else {
let rect = ele.getBoundingClientRect();
let doc = ele.ownerDocument.documentElement;
return {
top: rect.top + window.pageYOffset - doc.clientTop,
left: rect.left + window.pageXOffset - doc.clientLeft,
};
}
}
myEvent() {
$timeout(() => {
this.state.open = false;
document.body.removeEventListener("click", this.myEvent);
}, 0);
}
handleBlur() {
// 事件绑定
document.body.addEventListener("click", this.myEvent);
}
handleOpen(event) {
event.stopPropagation();
const { height, width } = $element[0].getBoundingClientRect();
const { top, left } = this.getOffset($element[0]);
|
|
dd962f77
Imshann
优化
|
89
90
91
92
93
94
|
// 处理标签
this.state.childrens.forEach(function (item) {
item.label = item.element.text();
})
|
|
3a3ecabe
Imshann
init
|
95
96
97
98
99
100
|
let div = document.createElement("div");
div.style.position = "absolute";
div.style.left = 0;
div.style.top = 0;
div.style.width = "100%";
div.appendChild(
|
|
dd962f77
Imshann
优化
|
101
102
103
104
|
$compile(`<div><div ng-class="'ant-select-dropdown ant-select-dropdown-placement-bottomLeft'+(!state.open?' ant-select-dropdown-hidden':'')" style="width: ${width}px; left: ${left}px; top: ${top + height + 2}px;">
<div class="ant-select-item ant-select-item-option" ng-click="handleClick(option)" ng-repeat="option in state.childrens">
<div class="ant-select-item-option-content">{{option.label}}</div>
</div>
|
|
3a3ecabe
Imshann
init
|
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
</div></div>`)($scope)[0]
);
if (this.state.popup === null) {
let func = this.props.getPopupContainer();
if (typeof func === "function" && func() !== undefined) {
$element[0].style.position = "relative";
this.props.getPopupContainer()().appendChild(div);
} else {
document.body.appendChild(div);
}
this.state.popup = div;
}
this.state.open = !this.state.open;
this.handleBlur();
}
}
|