UI框架的定制化(vant-weapp为例)

使用UI框架难免会遇到样式覆盖的问题,覆盖原来的样式做到还原定制化的UI界面,我们必须掌握一个可以复制或者是可以工程化的样式覆盖方式

我们打开vant的组件实例:

https://youzan.github.io/vant-weapp/#/col

image-20181124150037529

可以看到像vant-weapp的中的custom-class的类,外部样式类根据其定义内容,大概就是用作覆盖做定制化样式的用途,那我们来测试一下,现在有个需求,我需要在vant-weapp的基础上做个圆角搜索框

<van-search custom-class="mk-van-search" background="#E4668D" :value="keywords" placeholder="年抛 金粉 活动" v-model="key" use-action-slot @search="onSearch"></van-search>

我在app.vue中设置了全局样式

.mk-van-search {
    border-radius: 28rpx;
  }

如果这有曾经为此困扰过的开发者,应该明白这样设置并没有效果,但是问题出在哪里,我们又改如何设置呢?

我变向boss请教,原来boss也踩过坑,之所以叫做根节点样式类,将样式设置在根节点自然是没用的,更节点样式类,作用的类应该在子项上,也就是说有一个具体实施的类,我改变了设定方法

.mk-van-search {
    .van-cell{
      border-radius: 28rpx;
    }
  }

这里就只是加了 一个DOM子节点,也就是其显示的最小单位,但是有效!有效!

想不到问题就是这样,没踩过坑,都不知道有这么简单的实现办法