1. bug重現(xiàn)
- 由于項(xiàng)目不便展示，因此在官網(wǎng)復(fù)現(xiàn)bug
https://element-plus.org/zh-CN/component/select.html#基礎(chǔ)用法
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-520240.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-520240.html
2. 調(diào)試
- 源碼調(diào)試時(shí)發(fā)現(xiàn)下拉菜單是直接放在body 元素里，這時(shí)候希望它不要直接放在body里， 查閱文檔看到這兩個(gè)屬性：
- 但是添加了上面的屬性后，出現(xiàn)了新的問(wèn)題，要么是不生效，要么是下拉菜單不顯示了，但是這個(gè)時(shí)候通過(guò)調(diào)試代碼已經(jīng)發(fā)現(xiàn) 下拉菜單不是直接放在body里了，只是展示有問(wèn)題；
3. 解決
- popper-append-to-body 屬性被官方標(biāo)注為廢棄，因此在這里使用 :teleported=“false”
- 這里只提供解決方法，實(shí)際項(xiàng)目中需要封裝一個(gè)全局組件，并以該全局組件代替 select選擇器，組件中通過(guò)添加 v-bind=“$attrs” , 可以更簡(jiǎn)便的在使用時(shí)傳遞 element-plus 需要的屬性.
-
注意：
- 在vue3中，跨組件傳遞屬性和函數(shù)只用 v-bind=“$attrs” 即可；
- 在vue2中，跨組件傳遞屬性使用 v-bind=“$attrs” ， 跨組件傳遞函數(shù)使用 v-on=”$listeners” 。
<template>
<el-select
style="position: relative"
:teleported="false"
@visible-change="
(val) => {
// do something
controlSelectMenusFn(val);
}
"
>
<el-option ...></el-option>
</el-select>
</template>
<script setup lang="ts">
import { ref } from 'vue';
const controlSelectMenus = ref('none');
const controlSelectMenusFn = (val) => {
if (val) {
controlSelectMenus.value = 'line';
} else {
controlSelectMenus.value = 'none';
}
};
</script>
<style lang="less" scoped>
::v-deep(.el-popper.is-pure.is-light.el-select__popper) {
display: v-bind(controlSelectMenus) !important;
}
</style>
到了這里，關(guān)于Element-Plus select選擇器-下拉組件錯(cuò)位bug（有高度滾動(dòng)時(shí)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
