提示自适应位置

<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>