zoukankan      html  css  js  c++  java
  • vux修改css样式的2种办法

      最近手上有个移动端的项目。前端UI框架是选择的VUX。但是在使用的时候经常会发现框架自带的组件样式和我们要求的不一致。经常需要手动覆盖样式。这里记录下我们使用的2种方法。

    我们以XHeader组件为例。XHeader组件默认为藏青色。
    enter image description here
    enter image description here

    全局方式

    找到build目录下的webpack.base.conf在最后加入一下2行

    const themeConfig={
      name: 'less-theme',
      path: 'src/assets/less/theme.less'
    };
    module.exports = vuxLoader.merge(webpackConfig, {
      plugins:['vux-ui', themeConfig]
    });
    
    

    注意path的路径
    enter image description here
    然后我们在theme.less里面增加

    /**
    * Header
    */
    @header-background-color: #3cc51f;
    @header-title-color: black;
    
    

    enter image description here

    局部方式

      由于有时候我们一个界面有多个组件。样式都不一致的时候。全局方式就不适用了。所以我们需要采用局部的方式。同样还是XHeader我们这次需要把他们在同个界面把颜色修改成2种颜色可以使用/deep/ 或者>>>这里方式来修改。
    enter image description here

    <template>
      <div class="wrap">
        <x-header class="">XX银行<a slot="right"></a>
        </x-header>
        <div class="wrap1">
          <x-header class="">XX银行<a slot="right"></a>
          </x-header>
        </div>
        <toast v-model="isToast" type="text" position="middle" :text="toastTxt" width="auto"></toast>
      </div>
    </template>
    
    <style scoped>
      .wrap /deep/ .vux-header {
        background-color: #3cc51f;
      }
      .wrap1 >>> .vux-header {
        background-color: red;
      }
    </style>
    
  • 相关阅读:
    VB几种函数参数传递方法,Variant,数组,Optional,ParamArray
    一些 Windows 系统不常见的 鼠标光标常数
    加载MSCOMCTL.OCX错误处理的几个关键
    如何快速掌握一门技术
    《将博客搬至CSDN》
    日期小demo
    iOS崩溃解决记录
    Swift基础语法
    iOS端APP切图命名规范大全
    PHP案例:学生信息管理系统
  • 原文地址:https://www.cnblogs.com/pass245939319/p/10000206.html
Copyright © 2011-2022 走看看