In the recent development, it was necessary to put 1920*1080 on a larger pixel screen for demonstration, so it was necessary to use transform to scale the page. However, at this time, an error was found in the positioning of the pop-up frame, and it was impossible to prepare to locate the actual position.
After checking the official document of element-ui to no avail, I planned to change to a new framework for development, but after changing several, I found that there were similar problems. Since the previous projects used element-ui, I was familiar with this framework, so I decided to use it here. Solve the problem based on.
Before being resolved, the dislocation effect is as follows:
If the screen pixels are larger, the offset position will be further. This cannot be solved by the conventional configuration in the element-ui document and can only be considered from the bottom level.
1. Ideas
First of all, we have to dynamically modify the positioning-related parameters before or at the time when the trigger date pop-up box is displayed. We found a focus event in the official document. When this event is triggered, the pop-up box starts to display, so just modify the corresponding parameters here.
Secondly, bind the focus event function to return the ref object data of the current date component. You can modify the positioning attribute of the popup box through the popperJS object and update it again using the update() function.
Then, after the update is completed, you need to add a setTimeout timer to delay modifying the top attribute of the pop-up box. Since we don’t know from the bottom where to modify the top value, it is found that it is invalid to modify it before update(), because the coverage will be recalculated internally; it can only be modified after update(), and the same effect can be obtained by this strategy.
2. Code
1. Component code
<el-date-picker
v-model="dateValue"
size="small"
type="date"
:append-to-body="false"
:clearable="false"
placeholder="选择日期" @focus="focusFixDatePickerPosition">
</el-date-picker>2. Output focus event return parameters
methods: {
focusFixDatePickerPosition(e){
console.log(e);
}
}The output is as follows:
3. After testing, it was found that there are many functions with the same effect as the update() function, as follows:
// popperJS.state中updateBound()调用也会重新更新弹框位置
e.popperJS.state.updateBound();
// 直接调用popperJS中的update()
e.popperJS.update();
// 使用showPicker()也有同样效果
e.showPicker();
// 使用updatePopper()，也会更新弹框位置
e.updatePopper();In actual development, just use one of them as needed. I have not done any research on each function. I just tested and found that the same effect can be achieved. Students who like to get into trouble can research it.
4. Define the focusFixDatePickerPosition function in methods
methods: {
focusFixDatePickerPosition(e){
this.$nextTick(() => {
// 修改定位属性，将fixed改成absolute
e.popperJS.state.position = 'absolute';
// 调用update()后，弹框位置重新调休
e.popperJS.update();
// 添加计时器
setTimeout(() => {
// 输入框高度为弹框 顶部偏移量，获取后赋值给top即可
e.picker.$el.style.top = e.$el.clientHeight + "px";
}, 20);
});
}
}At this point, the correction of the bullet frame position is completed, and the effect is as follows:
