目标:用jsx语法 渲染出这个结构
选项卡和下面内容 分别是 b2c-tabs组件和b2c-panel组件
b2c-tabs组件放置所有选项卡,每个b2c-panel放置一个选项卡
在index页面
<template>
<!-- <体验jsx语法 -->
<!-- 引入选项卡组件,里面放默认插槽内容panel组件 -->
<b2c-tabs>
<b2c-tabs-panel label="选项卡1" name="first">内容1</b2c-tabs-panel>
<b2c-tabs-panel label="选项卡2" name="first">内容2</b2c-tabs-panel>
</b2c-tabs>
</div>
</template>
b2c-tabs页
<!-- jsx语法写,组件tabs-panel组件 -->
<script>
export default {
name: 'B2cTabs',
render () {
// 需要在这里进行组织
// 1.tabs组件大容器
// 2.选项卡的导航菜单结构
// 3.内容容器
// 2.选项卡的导航菜单结构
// 获取index页面 里b2c-tabs组件里的插槽内容 (几个panel组件)
// label选项卡的文字,name选项卡的唯一标识,panels的长度就是选项卡的个数
const panels = this.$slots.default()// panels就是 装着所有panel的面板,this是tabs组件
// 选项卡依赖于 index页面 里 panel组件的label
const nav = <nav>
{
panels.map((panel, i) => <a href="javascript:;">{panel.props.label}</a>)
}
</nav>
// 3.内容容器
// 选项卡依赖于 index页面 里 b2c-tabs-panel组件的 插槽内容
// 可以去这个组件里 写一个容器,比较省事
// const content = <div>
// <div>内容1</div>
// <div>内容2</div>
// <div>内容3</div>
// </div>
return <div class="b2c-tabs-container">{[nav, panels]}</div>
}
}
</script>
<style lang="less" scoped>
.b2c-tabs-container {
background: #fff;
> nav {
height: 60px;
line-height: 60px;
display: flex;
border-bottom: 1px solid #f5f5f5;
> a {
width: 110px;
border-right: 1px solid #f5f5f5;
text-align: center;
font-size: 16px;
&.active {
border-top: 2px solid @b2cColor;
height: 60px;
background: #fff;
line-height: 56px;
}
}
}
}
</style>
b2c-tabs-panel页
<template>
<!-- 每个选项卡对应的内容 放在这里 -->
<div class="b2c-tabs=panel">
<slot/>
</div>
</template>
<script>
export default {
name: 'B2cTabsPanel',
props: {
label: { // 选项卡文字
type: String,
default: ''
},
name: { // 选项卡 唯一标识
type: [String, Number],
default: ''
}
}
}
</script>
<style>
</style>
如果 index页 有静态和动态遍历 创建的
<template>
<div class="">我的订单
<!-- <体验jsx语法 -->
<!-- 引入选项卡组件,里面放默认插槽内容panel组件 -->
<b2c-tabs>
<!-- 静态 -->
<b2c-tabs-panel label="选项卡" name="first">内容</b2c-tabs-panel>
<!-- 动态遍历 -->
<b2c-tabs-panel v-for="i in 4" :key="i" :label="`选项卡${i}`" :name="`name${i}`">内容{
{ i}}</b2c-tabs-panel>
</b2c-tabs>
</div>
</template>
<!-- jsx语法写,组件tabs-panel组件 -->
<script>
export default {
name: 'B2cTabs',
render () {
// 需要在这里进行组织
// 1.tabs组件大容器
// 2.选项卡的导航菜单结构
// 3.内容容器
// 2.选项卡的导航菜单结构
// 获取order/index页面 里b2c-tabs组件里的插槽内容 (几个panel组件)
// label选项卡的文字,name选项卡的唯一标识,panels的长度就是选项卡的个数
const panels = this.$slots.default()// panels就是 装着所有panel的面板,this是tabs组件
// console.log(panels, 'panels')
// 得到动态(v-for)生成的panels集合和静态生成的panels集合
const dynamicPanels = []
panels.forEach(item => {
// 静态
if (item.type.name === 'B2cTabsPanel') {
dynamicPanels.push(item)
} else { // 动态遍历的
item.children.forEach(item => {
dynamicPanels.push(item)
})
}
})
// 选项卡依赖于 order/index页面 里 panel组件的label
const nav = <nav>
{/* <a href="javascript:;">选项1</a>
<a href="javascript:;">选项2</a>
<a href="javascript:;">选项3</a> */}
{
dynamicPanels.map((panel, i) => <a href="javascript:;">{panel.props.label}</a>)
}
</nav>
// 3.内容容器
// 选项卡依赖于 order/index页面 里 b2c-tabs-panel组件的 插槽内容
// 可以去这个组件里 写一个容器,比较省事
// const content = <div>
// <div>内容1</div>
// <div>内容2</div>
// <div>内容3</div>
// </div>
return <div class="b2c-tabs-container">{[nav, dynamicPanels]}</div>
}
}
</script>
<style lang="less" scoped>
.b2c-tabs-container {
background: #fff;
> nav {
height: 60px;
line-height: 60px;
display: flex;
border-bottom: 1px solid #f5f5f5;
> a {
width: 110px;
border-right: 1px solid #f5f5f5;
text-align: center;
font-size: 16px;
&.active {
border-top: 2px solid @b2cColor;
height: 60px;
background: #fff;
line-height: 56px;
}
}
}
}
</style>