<template>
|
<div>
|
<div class="filter-tab">
|
<span v-for="(item, index) in filterTab"
|
:key="index"
|
:class="{selected: activeIndex === index || (item.isPullDown && item.pullDownActive)}"
|
@click="handleFilterTab(index)">
|
{{ item.content }}
|
<i class="iconfont icon-triangledown-fill"
|
:class="{'icon-triangleup-fill': item.activeTriangle }"
|
v-if="item.isPullDown"></i>
|
</span>
|
</div>
|
<div class="vux-1px-b"></div>
|
</div>
|
</template>
|
|
<script>
|
/**
|
* Created by c.y on 2018/3/16.
|
* 组件的命名 项目名（F---filean) + 组件的描述（区别与框架的组件）
|
* 贷款的筛选tab
|
* 如果要使用这个组件，需要传递如下数组值
|
* * filterTab: [
|
{
|
isPullDown: true, // 是否有下拉选项（即三角形）
|
content: '筛选条件1',
|
pullDownActive: false, // 这个筛选条件是可以携带的，及点击一次就选中，后面一直选中,
|
activeTriangle: false // 下拉筛选三角形显示问题，列表展开三角形向上，收起三角形向下
|
},
|
{
|
isPullDown: false,
|
content: '筛选条件2',
|
pullDownActive: false
|
},
|
{
|
isPullDown: false,
|
content: '筛选条件3',
|
pullDownActive: false
|
}
|
]
|
*
|
*/
|
export default {
|
name: 'filter-tab',
|
data () {
|
return {
|
activeIndex: -1, // 初始化时候，都没选中
|
}
|
},
|
methods: {
|
// 点击筛选tab
|
handleFilterTab (index) {
|
this.activeIndex = index;
|
// 把当前点击的元素，传递给父组件
|
this.$emit('on-click-tab', this.filterTab[index], index);
|
}
|
},
|
props: {
|
filterTab: {
|
type: Array,
|
required: true
|
}
|
},
|
deactivated(){
|
this.activeIndex = -1;
|
}
|
}
|
</script>
|
|
<style lang="less">
|
@import "../../style/mixin";
|
|
.filter-tab {
|
position: relative;
|
width: 100%;
|
height: 32px;
|
font-size: @font-size-small;
|
line-height: 32px;
|
color: @color-text-primary;
|
.flexLayout();
|
background: @color-white;
|
span {
|
flex: 1;
|
text-align: center;
|
}
|
.selected {
|
color: @color-primary;
|
}
|
.iconfont {
|
font-size: @font-size-tiny;
|
}
|
}
|
</style>
|
