vue使用vant组件的field组件disabled修改默认样式

最新推荐文章于 2024-07-15 12:14:46 发布

只会cv的小前端

最新推荐文章于 2024-07-15 12:14:46 发布

阅读量2.7k

点赞数 2

分类专栏： vant 文章标签： vue

本文链接：https://blog.csdn.net/Wancc123/article/details/118521058

版权

vant 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在Vue开发中， scoped属性用于限制样式的作用域，但这也使得修改外部组件（如Vant）样式变得困难。本文介绍了如何通过/deep/选择器穿透scoped，正确地修改 vant-field 组件disabled状态下的字体样式。同时提到虽然/deep/已被弃用，但提供了替代的解决方案，帮助开发者在保持组件样式隔离的同时，实现对第三方组件样式的定制。

摘要由CSDN通过智能技术生成

由于vue开发时会在style加上scoped避免全局污染，所以正常开发时直接修改外部组件（vant）的样式时会不生效，我们把scoped删除后会发现样式是可以生效的。但是scoped是肯定不能不要的。所以我们可以用 /deep/（深度）来修改样式

举例 —— 修改vant —— field组件disabled情况下的字体默认样式

  /deep/.van-field__control:disabled,
  /deep/.van-field__control[disabled] {
    color: #000;
    opacity: 1;
    -webkit-text-fill-color: #000; // ios 和 安卓9.0 必须添加此属性，才会生效
    -webkit-opacity: 1;
  }

/deep/ 方法已经舍弃建议用最新的