vux使用要点记录(x-header&Tabbar的使用)

样式变量的使用

XHeader的使用

• 导入和注册相应组件

import { XHeader } from 'vux'
export default {
 components: {
   XHeader
 },
 data() {
   return {
     header_title: "大丰收农资商城"
   };
 },
  methods: {
   doSomething(){
     console.log('点击标题执行事件')
   },
   changeClass(e) {
     //console.log(e);
     var liList = document.getElementsByTagName("li");
     for (let index = 0; index < liList.length; index++) {
       liList[index].className = "";
     }
     e.target.parentNode.className = "active";
   }
 }
}

• 使用组件

<x-header @on-click-title="doSomething" :left-options="{backText:''}" :title="header_title">
  <div slot="right"><i class="iconfont icon-dianhua"></i></div>
</x-header>

属性使用

1. 属性
   属性一般写在标签中,以文档中出现的属性left-options.showBack为例,left-options为一个对象,可以点出showBack,且showBack为一个Boolean值,所以在使用时,应该在标签中添加 :left-options="{backText:’’}“一般写在标签中,以文档中出现的属性left-options.showBack为例,left-options为一个对象,可以点出showBack,且showBack为一个Boolean值,所以在使用时,应该在标签中添加 :left-options=”{backText:’’}"
2. 事件
   事件的底层使用的事自定义事件,添加事件直接加到行内即可,以@on-click-title为例,事件名称="处理函数"即可
3. 插槽
   具体操作如下:

<x-header @on-click-title="doSomething" :left-options="{backText:''}" :title="header_title">
   <div slot="right"><i class="iconfont icon-dianhua"></i></div>
   <!-- 头部右侧图标自定义为一个电话 -->
</x-header>

在标签中添加一个标签,使用slot(插槽)属性,选择对应值,修改即可

4. 样式变量
   具体操作参考下面↓↓↓

样式变量修改主体颜色

• 配置webpack.base.conf.js

module.exports = vuxLoader.merge(webpackConfig, {
 plugins: [{name: 'vux-ui'},{
   name: 'less-theme',
   path: 'src/styles/theme.less' // 相对项目根目录路径
 }]
})

• 修改theme.less文件

@yellow: #ffe26d;
@theme-color: #FF9900;
@button-tab-border-color: #ccc;
@button-tab-active-background-color: @yellow;
@button-tab-active-font-color: #000;

@switch-checked-bg-color: @yellow;
@switch-checked-border-color: @yellow;

@number-button-font-color: #FF9900;
@number-round-button-enabled-border-color: #FF9900;

@swiper-indicator-active-color: #FF9900;

@checklist-icon-active-color: #FF9900;

@tab-text-active-color: #FF9900;
@tab-bar-active-color: #FF9900;

@dialog-button-text-primary-color: #FF9900;

@form-preview-button-primary-color: #FF9900;

@tabbar-text-active-color: #35495e;

@toast-position-top-offset: 56px;
@toast-position-bottom-offset: 60px;

@search-cancel-font-color: #FF9900;

@radio-checked-icon-color: #FF9900;

@calendar-arrow-color: #c0c0c0;

/* 要修改的颜色,一个是头部背景色,一个是标题字体颜色 */
@header-background-color: #fff;
@header-title-color: #000;

• 重启项目即可

Tabbar的使用

• 导入和注册组件

import { Tabbar, TabbarItem } from 'vux'

export default {
components: {
  Tabbar,
  TabbarItem
}
}

• 使用组件

<tabbar>
      <tabbar-item selected link="/"> 
        <i slot="icon" class="iconfont icon-iconfonthome0"></i>
        <span slot="label">首页</span>
      </tabbar-item>
      <tabbar-item selected link="/">
        <i slot="icon" style="font-size:16px" class="iconfont icon-caidan"></i>
        <span slot="label">分类</span>
      </tabbar-item>
      <tabbar-item selected link="/">
        <i slot="icon" class="iconfont icon-gouwucheman"></i>
        <span slot="label">购物车</span>
      </tabbar-item>
      <tabbar-item selected link="/main">
        <i slot="icon" class="iconfont icon-wode"></i>
        <span slot="label">我的</span>
      </tabbar-item>
    </tabbar>

具体相关属性和参数的修改参考x-header,设置定位,可以在其外添加一层父级盒子,给父盒子添加定位,宽度设为100%即可.
注明:vux为手机端ui框架

参考链接:
主题配色:https://doc.vux.li/zh-CN/development/theme.html
源码地址:https://github.com/airyland/vux/blob/v2/src/styles/variable.less
组件源码:https://github.com/airyland/vux/blob/v2/src/components/x-header/index.vue