element-plus 的 el-popover 弹出框消除小箭头的方法show-arrow

507 阅读1分钟

image.png

根据element-plus的官方文档,发现直接使用show-arrow="false"并不会生效

解决方法:使用时加:在前面 :show-arrow="false" ,代码示例如下

  <el-popover placement="bottom" trigger="click" :show-arrow="false"
                popper-style="width: 18.75rem;height: 3.5rem;background-color: #f7f7f7;border-radius: 14px;border: 1px solid #E6E6E6;padding:0;">
          <template #reference>
                  <Bell style="width: 1.5rem; height: 1.5rem" />
           </template>
           <template #default>
                  <div style="display: flex;width: 18.75rem;height: 3.5rem;align-items: center;">
                    这是消息弹出
                  </div>
            </template>
 </el-popover>

实现出来的效果:

image.png