Vue中ElementUI结合transform使用时,修复el-select弹框定位不准确问题
<template>
<el-select ref="selectDropdown" v-model="selected">
<!-- options -->
</el-select>
</template>
<script>
export default {
data() {
return {
selected: ''
};
},
mounted() {
this.$nextTick(() => {
const popover = this.$refs.selectDropdown.popperElm;
if (popover) {
popover.style.transform = 'translateZ(0)';
}
});
}
};
</script>
这个代码实例展示了如何在Vue组件中使用Element UI的el-select
组件,并在组件被挂载后通过$nextTick
确保DOM已更新,然后对下拉菜单的popperElm
进行CSS变换,解决定位不准确的问题。这是一个典型的Vue和Element UI结合使用时的应用场景。
评论已关闭