样式变量的使用
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>
属性使用
- 属性
属性一般写在标签中,以文档中出现的属性left-options.showBack为例,left-options为一个对象,可以点出showBack,且showBack为一个Boolean值,所以在使用时,应该在标签中添加 :left-options="{backText:’’}“一般写在标签中,以文档中出现的属性left-options.showBack为例,left-options为一个对象,可以点出showBack,且showBack为一个Boolean值,所以在使用时,应该在标签中添加 :left-options=”{backText:’’}" - 事件
事件的底层使用的事自定义事件,添加事件直接加到行内即可,以@on-click-title为例,事件名称="处理函数"即可 - 插槽
具体操作如下:
<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(插槽)属性,选择对应值,修改即可
- 样式变量
具体操作参考下面↓↓↓
样式变量修改主体颜色
- 配置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