Vue3——使用deep进行样式穿透的时候发出v-deep警告
原创Vue3——使用deep进行样式穿透的时候发出v-deep警告
原创
思索
发布于 2024-06-24 23:54:28
发布于 2024-06-24 23:54:28
前言
其实只是一个警告，如果你不在意也是可以的，不过有点强迫症就按着提示说的改了，然后又去官网看了下对应的文档；
::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.
这里没啥好说的，因为Vue3的文档中有对应的解释组件作用域CSS了，而且就算不看文档根据提示我们也可以知道正确的写法;
内容
Vue2
.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
.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;
}
}原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录