Vue3——使用deep进行样式穿透的时候发出v-deep警告

2024-06-24 23:54:28 浏览数 (2)

前言

其实只是一个警告，如果你不在意也是可以的，不过有点强迫症就按着提示说的改了，然后又去官网看了下对应的文档；

::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

这里没啥好说的，因为Vue3的文档中有对应的解释组件作用域CSS了，而且就算不看文档根据提示我们也可以知道正确的写法;

内容

Vue2

代码语言：scss复制

.form {
    width: 520px;
    max-width: 100%;
    padding: 0 24px;
    box-sizing: border-box;
    margin: 160px auto 0;
    :deep {
      .el-input__wrapper {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
        background: rgba(0, 0, 0, 0.1);
      }
      .el-input-group--append > .el-input__wrapper {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
      .el-input-group--prepend > .el-input__wrapper {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
}

Vue3

代码语言：scss复制

.form {
      width: 520px;
      max-width: 100%;
      padding: 0 24px;
      box-sizing: border-box;
      margin: 160px auto 0;
      :deep(.el-input__wrapper) {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
        background: rgba(0, 0, 0, 0.1);
      }
      :deep(.el-input-group--append > .el-input__wrapper) {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
      }
      :deep(.el-input-group--prepend > .el-input__wrapper) {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
}

0 人点赞