<template #append>
<!-- element plus 的popover组件如何去自适应位置-->
<!-- :fallback-placements="['bottom', 'top', 'right', 'left']"当 Popover 弹出框的位置接近边界时,应该自动切换到相反的方向进行显示-->
<!-- popper-class添加最大高度,超过出现滚动条-->
<el-popover placement="bottom" :width="400" trigger="click"
popper-class="max-h-300px overflow-auto"
:fallback-placements="['bottom', 'top', 'right', 'left']">
<template #reference>
<el-button :icon="Aim"/>
</template>
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
<template v-for="i in iconsTabArr">
<el-tab-pane :label="i" :name="i">
<el-row>
<el-col :xs="6" :sm="6" :md="4" :lg="3" :xl="3" v-for="item in icons" :key="item.id">
<div class="text-center cursor-pointer transition-all duration-100 hover:( bg-purple-800 text-gray-50)" @click="selectIcon(item.value)">
<i :class="item.value" class="ri-2x"></i>
</div>
</el-col>
</el-row>
</el-tab-pane>
</template>
</el-tabs>
</el-popover>
</template>
<style scoped>
.max-h-300px {
max-height: 300px;
}
.overflow-auto {
overflow: auto;
}
<style>