elements-Plus Popover 弹出框自定义样式

在Vue.js中使用element-plus的Popover组件时，可以通过slot和CSS来自定义弹出框的样式。以下是一个简单的例子，展示如何自定义Popover的样式：

1. 使用默认插槽来自定义内容。
2. 使用reference插槽来指定触发Popover的元素。
3. 使用CSS来覆盖默认的Popover样式。

<template>
  <el-popover
    ref="popover"
    placement="top"
    width="200"
    trigger="hover"
    content="这是一个自定义样式的弹出框"
  >
    <template #reference>
      <el-button>悬停打开弹出框</el-button>
    </template>
 
    <template #default>
      <div class="custom-popover">
        自定义内容
      </div>
    </template>
  </el-popover>
</template>
 
<script>
export default {
  // 组件逻辑
};
</script>
 
<style>
/* 自定义弹出框样式 */
.custom-popover {
  background-color: #f9f9f9;
  color: #666;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 10px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
}
 
/* 覆盖Popover箭头样式 */
.el-popover .popper__arrow {
  display: none; /* 如果不需要箭头，可以隐藏它 */
}
</style>

在这个例子中，.custom-popover 类定义了弹出框的自定义样式，.el-popover .popper__arrow 类则用于隐藏默认箭头，因为箭头可能与自定义内容的样式冲突。您可以根据需要调整CSS样式来达到所需的外观效果。