vue 关于深度选择器（>>> | /deep/）修改Element el-drawer_vue 修改el-drawer 样式

vue 关于深度选择器（>>> | /deep/） ,一般用于修改第三方样式的时候会使用到.

示例: 比如修改Element el-drawer 控件超过范围实现上下滑动
如果不使用深度选择器的话实现:

1. 这里没有声明scoped ,这里的修改是作用于所有的el-drawer控件

//这里没有声明scoped ,这里的修改是作用于所有的el-drawer控件
<style lang="scss" >
.el-drawer{
    overflow: scroll
 	}
  </style>
1
2
3
4
5
6

2. 这里是作用于当前页面的.el-drawer,就要使用到深度选择器 /deep/

使用深度选择器:

//这里是作用于当前页面的.el-drawer,就要使用到深度选择器 /deep/
<style lang="scss" scoped>
 /deep/ .el-drawer{
    overflow: scroll
  }
  </style>
1
2
3
4
5
6

3. 关于>>> | /deep/的区别
   官方说>>>在scss中会有问题,建议使用/deep/