修改vux组件的css样式

Posted 2023-04-18

参考技术A 我们经常用vux的组件快速开发移动端的项目，比如常用的datetime组件，会遇到这样的问题。

而我们的需求要求value值靠左而非靠右，但datetime没有提供移动value值位置的属性，那怎么办呢？

首先需要找到经过vue处理后的值，

一种方法我们可以在全局上修改，简单粗暴。

vue也给我们提供了局部修改的方法：

这最终会被vue编译成：

可以看到字体变成向左靠齐，当然，可以用这种方法，修改任一内置组件，其他ui框架的修改方法也类似。

vux 组件打造手机端项目

其实，我用vux组件的过程是这样的，哇！太方便了！！功能好全！！太简单了！！然后，就各种“跳坑”。以下排坑环节。

1、安装vux：cnpm i -S vux;   比较顺利吧。

2、导入组件：

import {ViewBox, XHeader, Tabbar, TabbarItem} from ‘vux‘
export default {
  name: ‘app‘,
  components: {ViewBox, XHeader, Tabbar, TabbarItem}
}

　　报错！原因是vux内部样式是用less写的，所以要先安装less-loader!

cnpm  install less less-loader --save

3、使用组件

  <view-box>
      <x-header :left-options="{backText:‘‘}" title="MACC3.0" :right-options="{showMore:‘true‘}" slot="header">
      </x-header>
      <div style="height:650px;">

      </div>
      <tabbar solt="bottom">
        <tabbar-item show-dot>
          <img slot="icon" src="./assets/home.png">
          <span slot="label">首页</span>
        </tabbar-item>
        <tabbar-item badge="2">
          <img slot="icon" src="./assets/msg.png">
          <span slot="label">消息</span>
        </tabbar-item>
        <tabbar-item selected>
          <img slot="icon" src="./assets/new.png">
          <span slot="label">用户</span>
        </tabbar-item>
      </tabbar>
    </view-box>

　　报错！原因是vux内部有i18n语言包组件，需要配置：

cnpm install vux-loader

　　webpack.dev.config中加入：

var VuxLoader=require(‘vux-loader‘)
baseWebpackConfig=VuxLoader.merge(baseWebpackConfig,{plugins:[‘vux-ui‘]})

　　view-box 页面容器，应该height:100%,所以，它的父级html, body, #app的height：100%；

可以导入vux的重置样式文件：

 @import ‘~vux/src/styles/reset.less‘;

　　最后，是不是感觉还是不对劲儿，手机端！index.html 中加入：

<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1">