目前用了element ui的 el-autocomplete 组件远程检索的下拉框
效果如下:因为对字体的大小和背景颜色不太满意想自己修改一下
查询了官方文档,捣鼓了一下以失败而告终,下面贴代码
<el-autocomplete :trigger-on-focus="false" style="width:100%" v-model="form.xxx" :fetch-suggestions="getSmbxMessxage" placeholder="请输入xxx包路径" clearable autocomplete popper-class="my-autocomplete" popper-append-to-body="false" > <template slot-scope="{ item }"> <div class="package-path-value">{{ item.value }}</div> <span class="package-path-name">{{ item.name }}</span> </template> </el-autocomplete>
css样式代码如下
<style lang="scss" scoped > /deep/.my-autocomplete { li { line-height: normal; padding: 4px; background-color: aqua; .package-path-value { text-overflow: ellipsis; overflow: hidden; font-size: 8px; } .package-path-name { font-size: 10px; color: lightcoral; } } } </style>
这时发现 没有任何改变
但是当再写一个style 上面不用scoped关键字修饰就可以
问题又来了,如果不加scoped关键字 就会造成全局样式污染
生与死的两难,请问大佬,我该如何抉择
已解决
悬赏分:0
- 解决时间 2021-11-29 07:44
点赞 0反对 0举报 0
收藏 0
分享 0
回答2
最佳
-
因为下拉框的popper不是在组件内生成 而是在body直接上append dom 所以scoped不会生效
可以用固定全局类名 + popper-class
https://element.eleme.cn/#/zh...
或者试试popper-append-to-body的正确用法
:popper-append-to-body="false"
支持 0 反对 0 举报2021-11-28 11:25
-
1.不加scoped
你可以在它的父级加一个名字比较特殊的class,以用命名空间来解决问题。
2.加scoped
使用深度作用选择器。<style scoped> .a >>> .b { } </style>
支持 0 反对 0 举报2021-11-28 12:28