el-popover内容样式
时间: 2023-10-09 14:07:17 浏览: 110
要更改el-popover的样式,可以通过给el-popover添加popper-class属性来进行。例如popper-class="tag-popover"。
对于需要更改el-popover样式的页面,可以通过以下方法进行:
1. 在el-popover上添加popper-class属性,并设置为自定义的样式类名,如tag-popover。
2. 然后,通过设置样式类来修改el-popover的样式。例如,将.el-popover[x-placement^='bottom']选择器改为.tag-popover[x-placement^='bottom'],并修改相关样式属性。
这样做的原因是el-popover的样式不能放在scoped样式中,但是放在style中会污染全局样式,为了避免污染全局样式,需要进行这样的操作。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>
相关问题
el-popover修改样式
el-popover的样式可以通过设置全局样式或者使用popper-class属性来修改。在App.vue中添加以下样式可以修改el-popover的样式:
```css
.el-popover {
position: absolute;
background: rgba(22,38,94,1) !important;
min-width: 73%;
width: 100%;
border: 0px solid #EBEEF5;
padding: 12px;
z-index: 2000;
margin-right: 55px;
color: white;
line-height: 1.4;
text-align: justify;
font-size: 14px;
box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
word-break: break-all;
}
.el-popper\[x-placement^=top\] .popper__arrow::after {
bottom: -0.2px;
margin-left: -6px;
border-top-color: rgba(22,38,94,1) !important;
}
```
另外,你也可以在el-popover组件中使用popper-class属性来修改样式。例如:
```html
<el-popover width="300" trigger="hover" popper-class="popperOptions" placement="top-start">
<!-- 弹出框内容 -->
</el-popover>
```
然后在样式中定义popperOptions类来修改样式:
```css
.popperOptions\[x-placement^=left\] .popper__arrow::after {
border-left-color: #EA4E3D;
}
.popperOptions\[x-placement^=right\] .popper__arrow::after {
border-right-color: #EA4E3D;
}
.popperOptions\[x-placement^=bottom\] .popper__arrow::after {
border-bottom-color: #EA4E3D;
}
.popperOptions\[x-placement^=top\] .popper__arrow::after {
border-top-color: #EA4E3D;
}
.popperOptions {
background-color: #EA4E3D;
color: #FFFFFF;
font-size: 18px;
padding: 5px;
border: #EA4E3D;
}
```
这样就可以根据需要修改el-popover的样式了。
#### 引用[.reference_title]
- *1* [el-popover修改样式](https://blog.csdn.net/sinat_42888557/article/details/98631586)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [el-popover 样式修改](https://blog.csdn.net/weixin_44980864/article/details/119774065)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [element Popover 弹出框样式修改](https://blog.csdn.net/elephant_my/article/details/110791771)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
el-popover自定义样式
要自定义el-popover的样式,可以通过设置全局样式或者通过popper-class绑定自定义类名popperOptions来实现。
全局样式的设置可以在App.vue文件中添加以下样式:
```css
.el-popover {
position: absolute;
background: rgba(22, 38, 94, 1) !important;
min-width: 73%;
width: 100%;
border: 0 solid #EBEEF5;
padding: 12px;
z-index: 2000;
margin-right: 55px;
color: white;
line-height: 1.4;
text-align: justify;
font-size: 14px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
word-break: break-all;
}
.el-popper[x-placement^=top .popper__arrow::after {
bottom: -0.2px;
margin-left: -6px;
border-top-color: rgba(22, 38, 94, 1) !important;
}
```
另外,你也可以在el-popover组件中使用popper-class属性来绑定自定义类名popperOptions。例如:
```html
<el-popover width="300" trigger="hover" popper-class="popperOptions" placement="top-start">
<div class="operate-btn" slot="reference">
<el-badge :value="12" class="item">
<i class="icon el-icon-chat-line-round"></i>
</el-badge>
</div>
<span slot="default">你有99条未读消息,请及时查看</span>
</el-popover>
```
然后,在样式的根文件中,添加popperOptions类名的样式规则:
```css
.popperOptions[x-placement^=left .popper__arrow::after {
border-left-color: #EA4E3D;
}
.popperOptions[x-placement^=right .popper__arrow::after {
border-right-color: #EA4E3D;
}
.popperOptions[x-placement^=bottom .popper__arrow::after {
border-bottom-color: #EA4E3D;
}
.popperOptions[x-placement^=top .popper__arrow::after {
border-top-color: #EA4E3D;
}
.popperOptions {
background-color: #EA4E3D;
color: #FFFFFF;
font-size: 18px;
padding: 5px;
border: #EA4E3D;
}
```
这样就可以根据自己的需求来自定义el-popover的样式了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [el-popover修改样式](https://blog.csdn.net/sinat_42888557/article/details/98631586)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [el-popover 样式修改](https://blog.csdn.net/weixin_44980864/article/details/119774065)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
阅读全文