关于vue.js:vue组件中的样式属性scoped使用分享

vue 组件中的款式属性 scoped 实例

1. 开发环境 vue
2. 电脑系统 windows10 专业版
3. 在应用 vue 开发的过程中, 咱们在 style 标签上会加上 scoped, 然而如果咱们应用了其余的的一起框架, 咱们会发现如果加上了 scoped 之后无奈批改款式, 上面是我对 scoped 总结, 心愿对你有所帮忙!
4. 什么是 scoped ?

Scoped CSS 标准是 Web 组件产生不净化其余组件，也不被其余组件净化的 CSS 标准。vue 组件中的 style 标签标有 scoped 属性时表明 style 里的 css 款式只实用于以后组件元素。

5. 如何应用 scoped?

vue 应用办法:
在 style 标签上 加上 scoped

6.vue+element 应用 table 组件, 你会发现加上 scoped 属性之后, 有的款式没有失效, 增加 scoped 之前的成果:

7. 增加 scoped 之后的成果:

css 局部代码如下:
.chenshebei  .el-table--enable-row-hover .el-table__body tr:hover > td {background-color: #003b51 !important;}

.chenshebei .el-table th,
.chenshebei  .el-table tr {
  background-color: #0a2732 !important;
  box-sizing: border-box;
  color: #83c7e3 !important;
  opacity: 0.6;
}

.chenshebei  .el-table {
  background-color: #003b51 !important;
  box-sizing: border-box;
  margin: 1% auto;
  position: absolute;
  bottom: 0%;
  right: 2%;
}

7. 解决办法,css 代码, 如下:

.chenshebei /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {background-color: #003b51 !important;}

.chenshebei /deep/ .el-table th,
.chenshebei /deep/ .el-table tr {
  background-color: #0a2732 !important;
  box-sizing: border-box;
  color: #83c7e3 !important;
  opacity: 0.6;
}

.chenshebei /deep/ .el-table {
  background-color: #003b51 !important;
  box-sizing: border-box;
  margin: 1% auto;
  position: absolute;
  bottom: 0%;
  right: 2%;
}

// 留神: 深度选择器: /deep/ 也能够应用: >>> , 成果是一样的。一些预处理程序例如 sass 不能解析 >>> 属性，这种状况下能够用 deep，它是 >>> 的别名，工作原理雷同。

7-1. 效果图如下:

8. 本期的分享到了这里就完结啦, 是不是很 nice, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!