添加popper-append-to-body下拉选中之后 再打开 还是会有高亮
时间: 2023-08-07 12:03:42 浏览: 43
如果你设置了 `popper-append-to-body` 属性后,下拉框选中后仍然会有高亮,那么你可以通过添加自定义的 CSS 样式来解决这个问题。
首先,你需要给 `el-select` 组件添加一个自定义的 class 名称,比如 `custom-select`:
```html
<el-select popper-append-to-body class="custom-select">
<el-option label="选项1" value="1"></el-option>
<el-option label="选项2" value="2"></el-option>
<el-option label="选项3" value="3"></el-option>
</el-select>
```
然后,在你的 CSS 文件中添加如下样式:
```css
.el-select__popper.is-popper-append-to-body .el-select-dropdown__item.selected {
background-color: transparent !important;
}
```
这个样式会将 `popper-append-to-body` 属性设置为 true 的 `el-select` 组件中选中的选项背景色设置为透明,从而达到去除高亮的效果。
注意,这里使用了 `!important` 来覆盖原有的样式,如果你的样式优先级足够高,可以省略 `!important`。
相关问题
vue element-ui 全局添加popper-append-to-body属性
回答:您可以使用Vue.mixin方法全局添加popper-append-to-body属性,具体方法如下:
1. 在项目中新建一个mixin.js文件
2. 在mixin.js文件中编写如下代码:
import Vue from 'vue';
import ElementUI from 'element-ui';
Vue.mixin({
mounted() {
ElementUI.LoadingBar.config({
color: '#5cb85c',
failedColor: '#f0ad4e',
});
}
});
3. 在main.js文件中引入mixin.js文件:
import './mixin.js';
4. 然后在你的popper组件上加上popper-append-to-body属性即可,如下所示:
<el-popover trigger="click" popper-append-to-body>A popover</el-popover>
给所有的el-select都添加为popper-append-to-body
将所有的el-select添加为popper-append-to-body可以通过修改全局配置来实现。可以在main.js文件中添加以下代码:
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI, {
popperAppendToBody: true // 添加全局配置popper-append-to-body
});
这将在全局范围内启用popper-append-to-body。它将影响整个应用程序,并将应用于所有使用el-select组件的地方,无需逐个修改每个el-select组件。这是一种高效且方便的方式来实现所需的更改。
注意,为了使此更改生效,您需要确保引入了Vue和ElementUI,并且通过Vue.use()方法将ElementUI注入Vue实例中。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)