看门见山,直接上代码和截图!

Select 选择器 自定义样式实现

  1. 目标:自定义实现Element ui select 选择器组件的样式,效果对比如下:

【element ui】 select 选择器自定义样式
【element ui】 select 选择器自定义样式
2. 代码实现
el-select 标签中使用了 popper-class属性和popper-append-to-body属性。

【element ui】 select 选择器自定义样式

A. popper-class属性的含义是指定一个class ,该class定义下拉在这里插入代码片面板的样式,即实现自定义样式。
因此:截图中的select-panel是写在style中的一个class name

【element ui】 select 选择器自定义样式

B.popper-append-to-body属性的作用设置
弹出框是否插入在body下,默认值为true。值为true,表示将弹出框插入body下;

【element ui】 select 选择器自定义样式
【element ui】 select 选择器自定义样式
若popper-append-to-body属性值为false,将弹出框 插入body下,具体插入位置见截图????
【element ui】 select 选择器自定义样式

OK, 自定义样式完成!下期再见!ヾ(ToT)ByeBye

相关文章:

  • 2021-07-19
  • 2022-01-15
  • 2021-04-04
  • 2021-05-30
  • 2021-09-20
  • 2018-11-06
  • 2021-09-20
  • 2021-09-20
猜你喜欢
  • 2021-04-09
  • 2021-12-12
  • 2021-12-12
  • 2021-11-24
  • 2020-05-25
  • 2021-10-24
  • 2021-11-09
相关资源
相似解决方案