[前端] vue2的/deep/转化为vue3语法(笔记)

vue2语法示例

<style scoped lang="less">
  /deep/.el-carousel__button {
    width: 8px;
    height: 3px;
    border-radius: 3px;
  }
  /deep/.el-carousel__indicator.is-active button {
    width: 16px;
  }
}
</style>

在 Vue 3 中,/deep/ >>> 选择器已被废弃,因为它们与 Shadow DOM 的概念相冲突。Vue 3 引入了 v-deep ::v-deep 伪类作为非标准的解决方案来穿透 scoped 样式,但这并不是长期推荐的实践。通常,你应该考虑使用 CSS 模块(CSS Modules)或组件级别的 CSS(如使用 style 标签的 module 属性)来管理样式。

然而,如果你确实需要在 Vue 3 中穿透 scoped 限制来修改第三方组件的样式,你可以使用 ::v-deep。但请注意,这可能会在未来的 Vue 版本中移除,所以最好尽量避免这种情况。以下是使用 ::v-deep 的示例:

<style scoped lang="less">
:deep(.el-carousel__button) {
    width: 8px;
    height: 3px;
    border-radius: 3px;
  }

 :deep(.el-carousel__indicator.is-active button) {
    width: 16px;
  }
</style>

相关推荐

  1. [前端] vue2/deep/转化vue3语法笔记

    2024-05-15 15:58:14       4 阅读
  2. 前端学习笔记 2Vue

    2024-05-15 15:58:14       28 阅读
  3. 前端vue3打包命令 ,Vue2Vue3 命令区别

    2024-05-15 15:58:14       21 阅读
  4. 前端】项目Vue2升级Vue3注意事项

    2024-05-15 15:58:14       7 阅读

最近更新

  1. .Net Core WebAPI参数的传递方式

    2024-05-15 15:58:14       0 阅读
  2. QT--气泡框的实现

    2024-05-15 15:58:14       1 阅读
  3. LeetCode 968.监控二叉树 (hard)

    2024-05-15 15:58:14       0 阅读
  4. leetcode热题100.完全平方数(动态规划进阶)

    2024-05-15 15:58:14       0 阅读
  5. leetcode328-Odd Even Linked List

    2024-05-15 15:58:14       0 阅读
  6. C 语言设计模式(结构型)

    2024-05-15 15:58:14       0 阅读
  7. v-if 与 v-show(vue3条件渲染)

    2024-05-15 15:58:14       0 阅读
  8. kafka防止消息丢失配置

    2024-05-15 15:58:14       0 阅读

热门阅读

  1. vue3 动态加载页面

    2024-05-15 15:58:14       3 阅读
  2. error和exception的区别?

    2024-05-15 15:58:14       3 阅读
  3. ISBN查询图书api接口

    2024-05-15 15:58:14       4 阅读
  4. 解决方案:sql里的join跟left join有什么区别

    2024-05-15 15:58:14       4 阅读
  5. 探索Git:版本控制的革命(一文了解Git)

    2024-05-15 15:58:14       5 阅读
  6. 小米消金引领创新,打造重庆消费金融新生态

    2024-05-15 15:58:14       4 阅读
  7. 算法学习笔记(LCA)

    2024-05-15 15:58:14       3 阅读
  8. SQL中的LAG函数与LEAD函数用法

    2024-05-15 15:58:14       3 阅读
  9. Spring中事务的失效场景

    2024-05-15 15:58:14       6 阅读
  10. Windows下打包项目成Linux版本

    2024-05-15 15:58:14       3 阅读