精华内容
下载资源
问答
  • vant组件样式修改

    千次阅读 2020-09-08 10:03:48
    主要还是在VUE中使用vant组件,一些样式修改。 例如: 这样的一个组件,我们修改他的样式,这里是我修改过后的样式,原来是白色的。 可以在app的样式中加入: .van-dropdown-menu__bar { background: #6609f2 !...

    主要还是在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>
    

    有更好的方法请留言

    展开全文
  • 例如我想让总价向左一点但整个组件只有一个vant-submit-bar盒子 检查元素发现vant-submit-bar_bar 的padding 可以实现改变但编辑器并没有这个盒子 解决方法:找到类的文件夹改变相应类的padding即可 ...

    我的是wepy框架下引入的vant 文件夹

    在这里插入图片描述

    例如我想让总价向左一点但整个组件只有一个vant-submit-bar盒子

    在这里插入图片描述

    检查元素发现vant-submit-bar_bar 的padding 可以实现改变但编辑器并没有这个盒子

    在这里插入图片描述

    解决方法:找到类的文件夹改变相应类的padding即可

    在这里插入图片描述

    展开全文
  • 微信小程序——修改Vant组件样式

    千次阅读 2020-03-16 01:15:53
    虽然Vant组件里面加入了不少外部样式类供用户修改样式,但还是满足不了需求,我就拿选择器Picker举例子: 比如默认的Picker样式是这样的: 我如果想修改顶部的文字栏的颜色为绿色并且加粗(取消、选择城市、确认...

    在项目开发中有时会遇到修改组件样式的问题,比如想颜色统一协调,字体突出等。虽然Vant在组件里面加入了不少外部样式类供用户修改样式,但还是满足不了需求,我就拿选择器Picker举例子:
    比如默认的Picker样式是这样的:
    在这里插入图片描述
    我如果想修改顶部的文字栏的颜色为绿色并且加粗(取消选择城市确认

    查看文档,找到了它的顶部样式类说明,给它加样式:
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    结果呢?样式变成了这样:
    在这里插入图片描述
    我们发现,组件样式并没有按照我们所想的去设置:

    中间的选择城市文字成功变为绿色,但是没有加粗。

    左右两边的取消确认没有变成绿色,但是成功加粗。

    于是我们用控制台查看其HTML结构:
    在这里插入图片描述
    可以看到我们成功对其设置了样式,

    我们切换选中到取消文本所在的div标签上:
    在这里插入图片描述
    此刻,我们看到,原来是样式类.van-picker__cancel对取消所在的div设置了字体颜色样式。

    学过CSS的都应该知道,最终的设置样式如果权重是一样的(都只有一个class设置样式),那么会取最接近该标签的类为准,比如我给div的父元素设置了color为蓝色,而又给div元素本身设置了color为红色,那么div会优先选择最近的(红色)为字体颜色。

    所以我们可以通过增加权重来改变设置的样式规则顺序:比如我们可以给.top-green类后面加一个view标签选择器(因为取消所在的标签就是view):
    在这里插入图片描述
    这样,我们因为 类选择器+标签选择器 >类选择器。于是成功覆盖了Vant自带的类样式设置:
    在这里插入图片描述
    现在明白了吧?

    同样地我再举个例子:

    我想修改Picker的选中项样式类,想把选中的项变为红色。当然你如果直接color:red:
    在这里插入图片描述
    这样子肯定是不行的,

    我们通过分析结构:
    在这里插入图片描述
    可以得出,我们设置的样式和它自带的样式是同级的,但是Vant还是采用了它自带的样式…那怎么办呢?

    很简单:
    在这里插入图片描述

    这次只要在前面加个view就好了,增加了权重(因为所设置的样式类已经在最末尾的view了不能再在后面加view选择器了,所以在前面加)

    好了。大致的方法和思路就是这些了,Vant的其他组件同理,而且不仅是Vant,其他的小程序组件也同理。设置不到样式就是权重的问题了,想办法通过各种选择器的叠加权重来使其设置样式吧

    如果还有疑问的可以在下方留言我看到了就会回复

    觉得有帮助的麻烦点个赞吧,感谢!

    展开全文
  • 修改vant组件样式

    千次阅读 2020-08-10 16:50:39
    <style scoped> 添加scoped .searchIcon >... searchIcon是新起的class名字van-icon-search是vant组件标签名字 中间用>>>穿透 即可修改vant自带组件class名 </style> ...

    <style scoped> 添加scoped
        .searchIcon >>> .van-icon-search{color:#fff;}

        searchIcon是新起的class名字 van-icon-search是vant组件标签名字 中间用>>>穿透 即可修改vant自带组件class名
    </style>

    展开全文
  • 在引入外部组件的时候,想要修改默认样式,可以通过class修改,但一般会有权重不够等各种原因,官网其实列出了一套主题定制的方案,通过覆盖配置文件来修改样式,官网地址:主题定制 提示:以下是本篇文章正文内容...
  • 微信小程序中修改vant组件样式

    千次阅读 2019-11-27 11:44:34
    微信小程序中修改vant组件样式 这里vant中的Tab标签页组件把GoodsAction 商品导航给遮住了,需要给GoodsAction加一个层级 以下是初始状态 经过修改之后
  • 最近小程序使用vant组件库,有些组件需要自定义成我们的UI的样式,查看源码发现vant使用css的var方法,于是,觉得可以集中在common里面的index.wxss写所需要自定义的样式 然后在这个文件中加入page,修改想要修改...
  • 自定义vant组件样式

    千次阅读 2020-02-12 15:41:41
    学习修改vant组件样式无法显示的问题 由于scoped只对当前.vue文件中的template模板标签内的结构有效,所以在含有scoped属性的style标签中修改vant组件样式是无效的。 所以先确保.vue文件的style标签没有使用scoped...
  • Vant组件库 , 修改NavBar组件的样式

    千次阅读 2020-11-27 19:55:27
    今天在引用navbar组件的时候 , 发现没有像Tabbar那样能修改样式的属性 , 可以给 组件对应的标签去做修改,如果不能解决,那么就要使用深度选择器/deep/ 或 ::v-deep,实现对组件内部的样式修改 <van-nav-bar ...
  • 在vue中,常规写style都会加上scoped,以避免全局污染,但是加上了scoped会导致无法修改 vant UI框架组件本身的样式,但是scoped是不能省略的。为了解决这个问题,本人尝试了多种方法都不行,最后,通过新建一个新的...
  • 由于vue开发时会在style加上scoped避免全局污染,所以正常开发时直接修改外部组件vant)的样式时会不...所以我们可以用 /deep/(深度监听)来修改样式 /deep/.van-dropdown-menu__title{ font-size: 0.26rem; ...
  • 在全局公共样式修改即可
  • Vant组件样式穿透实录

    2020-09-01 14:07:12
    实际使用vant环形图组件,需要适配红色调整体设计风格,修改源文件未生效,原类覆盖也没有生效最终使用 /deep/解决了问题,特此记录,分享。 问题描述: 期望修改css样式中的font-size属性为 12px (0.32rem) 期望...
  • 解除样式隔离 1、在组件内部options属性中定义styleIsolation: 'isolated' ...app.wxss 或页面的 wxss 中使用了标签名选择器(或一些其他特殊选择器)来直接指定样式,这些选择器会影响到页面和全部组件。通常...
  • 在vue中,常规写style都会加上scoped,以避免全局污染,但是加上了scoped会导致无法修改 vant UI框架组件本身的样式 但是scoped是不能放弃的,这辈子都不能放弃的,那就得另寻出出路了 我有用sass预处理器 ...
  • 首先我们应该知道在scoped里修改是无法做到修改vant样式的,这是外部引入的样式,下面的方法可以解决修改vant样式的同时,使用scoped,防止样式污染 第一种:加上父级自己定义的类名.common-container >>>...
  • 原因:当 style 标签里有scoped属性时,在scoped作用域组件样式中,默认只能在作用在组件的根节点,如果需要影响其后代元素,需要使用深度选择器 深度选择器 // 深度选择器 : /deep/ ::v-deep >>> 最后一个只作用于...

空空如也

空空如也

1 2 3 4 5 ... 8
收藏数 150
精华内容 60
关键字:

vant组件修改样式