主要还是在VUE中使用vant组件,一些样式的修改。
例如:一个picker组件

这样的一个组件,我们修改他的样式,这里是我修改过后的样式,原来是白色的。
可以在app的样式中加入:

.van-dropdown-menu__bar {
   background: #6609f2 !important;
   box-shadow: none !important;
 }

.van-dropdown-menu__title,
.van-dropdown-menu__title--active {
   color: #fff !important;
 }

这里类名如何得知呢?通过网页审查元素得到。
但这样修改会产生一个问题,就是这个样式成为全局的了。
别的页面使用,也会是这样一个样式。
这个时候,可以在单独页面中设置,但要注意的是把spcoed去掉,不然不生效。

<style lang='less'>
.van-dropdown-menu__bar {
  background: #6609f2 !important;
  box-shadow: none !important;
}

.van-dropdown-menu__title,
.van-dropdown-menu__title--active {
  color: #fff !important;
}
</style>

效果如图:
在这里插入图片描述
在这里插入图片描述
但后来又发现又有新的问题,子组件在相同的页面,修改掉,但不能同时展现两个。
后面灵机一动,又想到了一个新的方法:
html结构:

        <van-dropdown-menu class="btn">
          <van-dropdown-item v-model="valueCity" :options="optionCity" @change="changeCity" />
          <van-dropdown-item v-model="valuePrice" :options="optionPrice" @change="changeDropdown" />
          <van-dropdown-item v-model="valueYear" :options="optionYear" @change="changeYear" />
        </van-dropdown-menu>

加了一个btn 的类名:提高权限,限制样式条件
css:

<style lang="less" >
.btn > .van-dropdown-menu__bar {
  background: #fff !important;
}
.btn .van-dropdown-menu__title {
  color: #333 !important;
}
</style>

有更好的方法请留言

Logo

前往低代码交流专区

更多推荐