株洲建设网站制作,做网站的第一步,网站管理是做什么的,响应式布局模板网站免费下载在近期开发中#xff0c;需要将1920*1080放到更大像素大屏上演示#xff0c;所以需要使用到transform来对页面进行缩放#xff0c;但是此时发现弹框定位出错问题#xff0c;无法准备定位到实际位置。 查看element-ui官方文档无果后#xff0c;打算更换新的框架进行开发需要将1920*1080放到更大像素大屏上演示所以需要使用到transform来对页面进行缩放但是此时发现弹框定位出错问题无法准备定位到实际位置。 查看element-ui官方文档无果后打算更换新的框架进行开发但更换几个后发现都存在类似问题由于之前项目都是使用element-ui对此框架比较熟悉所以还是决定在此基础上解决问题。 在未解决前错位效果如下 如果屏幕像素更大则偏移位置更远对此element-ui文档中常规配置已无法解决只能从底层考虑。
一、思路 首先我们得在触发日期弹框显示前或当时动态修改定位相关参数在官方文档上发现有focus事件在触发此事件时弹框开始显示所以在此修改相应参数即可。 其次绑定focus事件函数返回当前日期组件的ref对象数据可以通过popperJS对象修改弹框的定位属性并使用update()函数重新更新即可。 然后在更新完成后需要添加setTimeout计时器延迟修改弹框的top属性。由于暂时未从底层了解到从哪修改top值放在update()之前修改发现无效由于内部会重新计算覆盖只能在update()之后修改出此下策也能得到同样效果。 二、代码
1、组件代码
el-date-pickerv-modeldateValuesizesmalltypedate:append-to-bodyfalse:clearablefalseplaceholder选择日期 focusfocusFixDatePickerPosition/el-date-picker
2、输出focus事件返回参数
methods: {focusFixDatePickerPosition(e){console.log(e);}
}
输出结果如下 3、经测试发现同update()函数一样效果的函数还有很多如下
// popperJS.state中updateBound()调用也会重新更新弹框位置
e.popperJS.state.updateBound();// 直接调用popperJS中的update()
e.popperJS.update();// 使用showPicker()也有同样效果
e.showPicker();// 使用updatePopper()也会更新弹框位置
e.updatePopper(); 在实际开发中根据需要使用其中一个即可。每个函数本人也没作研究只是测试发现可实现同样效果喜欢钻牛角尖的同学可以研究下。
4、在methods中定义focusFixDatePickerPosition函数
methods: {focusFixDatePickerPosition(e){this.$nextTick(() {// 修改定位属性将fixed改成absolutee.popperJS.state.position absolute;// 调用update()后弹框位置重新调休e.popperJS.update();// 添加计时器setTimeout(() {// 输入框高度为弹框 顶部偏移量获取后赋值给top即可e.picker.$el.style.top e.$el.clientHeight px;}, 20);});}
}
此时则完成了弹框位置的修正效果如下
