遇到了奇怪的需求,意思是不喜欢iView自带的图标,要求在Tabs标签上展示自定义图标,看了一下官方的文档,发现依然是传统的习惯一一写一半藏一半,我就不给你写全了,慢慢研究去吧。
完整代码如下:
<template>
<div>
<Tabs :value="tabsName">
<TabPane :name="item.tabsName" :label="tabsTabel(item)" v-for="(item,index) in tabsData" :key="index">
{{item.tabsCon}}
</TabPane>
</Tabs>
</div>
</template>
<script>
export default {
data() {
return {
// tabs数据
tabsData: [],
tabsName: '',
// tabs自定义Label
tabsTabel(data){
return (h)=>{
return h('div', [
// 加载图标 - 由于用的是iconfont图标, 所以无法显示
h('i', {
class: ['iconfont', data.tabsIcon]
}),
// 加载标题
h('span', data.tabsName),
// 加载数字
h('Badge', {
props: {
count: data.tabsNum
}
})
]);
};
}
};
},
mounted: function() {
// 获取标签数据
this.initTabsData()
},
methods: {
initTabsData: function () {
// 假装从接口返回来的数据
this.tabsData = [{
'tabsName': '标签1',
'tabsCon': '标签1的内容',
'tabsNum': 3,
'tabsIcon': 'ios-american-football'
}, {
'tabsName': '标签2',
'tabsCon': '标签2的内容',
'tabsNum': 10,
'tabsIcon': 'md-analytics'
}, {
'tabsName': '标签3',
'tabsCon': '标签3的内容',
'tabsNum': 20,
'tabsIcon': 'ios-american-football'
}]
// 设置默认展示的TAB
this.tabsName = this.tabsData[0].tabsName
}
}
};
</script>
该有的注释应该都有了,甚至可以新建一个页面直接看DEMO,这是基于官方文档的完整栗子,包含模拟了从接口读出来的数据处理及动态循环等。
评论
我在label里面加了一个取色器,然后点击取色器结果取色界面因为tabs上面标签高度就那么点不能撑开,请问怎么才能让取色器浮在最顶层?
把取色器放在外层div, 然后用v-show控制