具体参考 动态插槽名问题讨论和 HACK 方案
效果
注意微信小程序 动态插槽不支持默认内容
子组件 创建插槽
关键处代码
<template v-for="(item, index) in tabItem">
<view class="flex-grow h-0 overflow-auto" v-if="computedValue === item.name" :key="index">
<!-- #ifdef MP -->
<!-- <slot name="{
{item.name}}"> </slot> -->
<slot name="tab:{
{index}}"> </slot>
<!-- #endif -->
<!-- #ifdef H5 || APP-PLUS -->
<!-- <slot :name="item.name"> -->
<slot :name="`tab:${index}`">
<view class="w-full h-80 flex-center">
<text class="text-c_gray-2">暂无数据{
{
item.name }}</text>
</view>
</slot>
<!-- #endif -->
</view>
</template>
完整代码 （样式缺失 使用的是tailwindcss）
<template>
<view class="w-full h-full flex flex-col">
<view class="w-full bg_gradient_blue_4 flex flex-row items-center justify-start" style="height: 83rpx">
<view
v-for="(item, index) in tabItem"
:key="index"
style="height: 83rpx"
class="flex-center flex-row rounded-t-20"
:style="computedWidthStyle"
:class="computedValue === item.name ? 'bg_withe_blue text-c_blue-2' : 'text-c_blue-3'"
@click="changeTab(item)"
>
<text>{
{
item.label }}</text>
</view>
</view>
<template v-for="(item, index) in tabItem">
<view class="flex-grow h-0 overflow-auto" v-if="computedValue === item.name" :key="index">
<!-- #ifdef MP -->
<!-- <slot name="{
{item.name}}"> </slot> -->
<slot name="tab:{
{index}}"> </slot>
<!-- #endif -->
<!-- #ifdef H5 || APP-PLUS -->
<!-- <slot :name="item.name"> -->
<slot :name="`tab:${index}`">
<view class="w-full h-80 flex-center">
<text class="text-c_gray-2">暂无数据{
{
item.name }}</text>
</view>
</slot>
<!-- #endif -->
</view>
</template>
</view>
</template>
<script>
export default {
props: {
value: {
// 必须要使用value
default: ''
},
tabItem: {
type: Array,
default: () => [
// {
// label: '作业中',
// name: 'working',
// query: {
// name: 'tabItemName',
// value: 'working'
// }
// },
// {
// label: '待拣',
// name: 'waiting',
// query: {
// name: 'tabItemName',
// value: 'waiting'
// }
// },
// {
// label: '已拣',
// name: 'already',
// query: {
// name: 'tabItemName',
// value: 'already'
// }
// },
// {
// label: '拣货详情',
// name: 'details',
// query: {
// name: 'tabItemName',
// value: 'details'
// }
// }
]
}
},
data: () => ({
}),
computed: {
// 双向绑定
computedValue: {
get() {
return this.value
},
set(value) {
this.$emit('input', value)
}
},
computedWidthStyle() {
let length = this.tabItem.length
if (length <= 0) {
return ''
}
let w = ''
w = Math.floor(100 / length).toFixed(5)
return `width:${
w}%;`
}
},
methods: {
changeTab(item) {
this.$emit('input', item.name)
}
},
watch: {
},
// 组件周期函数--监听组件挂载完毕
mounted() {
},
// 组件周期函数--监听组件数据更新之前
beforeUpdate() {
},
// 组件周期函数--监听组件数据更新之后
updated() {
},
// 组件周期函数--监听组件激活(显示)
activated() {
},
// 组件周期函数--监听组件停用(隐藏)
deactivated() {
},
// 组件周期函数--监听组件销毁之前
beforeDestroy() {
}
}
</script>
<style></style>
父组件 使用插槽
使用关键代码
<!-- #ifdef MP -->
<template v-for="(item, index) in tabItem" slot="tab:{
{index}}">
<!-- #endif -->
<!-- #ifdef H5 || APP-PLUS -->
<template v-for="(item, index) in tabItem" :slot="`tab:${index}`">
<!-- #endif -->
<!-- 作业中 -->
<view :key="index" v-if="getIndexToName(tabItem,'working',index)"
>1少时诵诗书所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所2+{
{
item.name }}</view
>
</template>
如果 插槽时渲染出现时出现一个 view 属性为空的标签包裹 包裹 插槽组件 导致子组件无法与父组件样式继承错乱 可使用如下写法 不需要使用 template 包裹 判断是使用v-show
<view v-for="(item, index) in tabItem" :slot="`tab:${index}`" :key="index" v-show="getIndexToName(tabItem,'working',index)"
>1少时诵诗书所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所2+{
{
item.name }}</view
>
完整代码 （样式缺失 使用的是tailwindcss）
<template>
<view class="w-full flex flex-col" :style="getTabStyle">
<wmsTabs class="w-full h-0 flex-grow " :tabItem="tabItem" v-model="tabValue">
<!-- #ifdef MP -->
<template v-for="(item, index) in tabItem" slot="tab:{
{index}}">
<!-- #endif -->
<!-- #ifdef H5 || APP-PLUS -->
<template v-for="(item, index) in tabItem" :slot="`tab:${index}`">
<!-- #endif -->
<!-- 作业中 -->
<view :key="index" v-if="getIndexToName(tabItem,'working',index)"
>1少时诵诗书所所所所所所所所所所所所所所所所所所所所所所所所所所所所所所2+{
{
item.name }}</view
>
</template>
</wmsTabs>
</view>
</template>
<script>
import wmsTabs from '@/components/base-ui/wms-tabs'
export default {
components: {
wmsTabs
},
props: {
// 组件显示区域最大高度
maxHeight: Number | String
},
data: () => ({
tabValue: 'working',
tabItem: [
{
label: '作业中',
name: 'working',
query: {
name: 'tabItemName',
value: 'working'
}
},
{
label: '待拣',
name: 'waiting',
query: {
name: 'tabItemName',
value: 'waiting'
}
},
{
label: '已拣',
name: 'already',
query: {
name: 'tabItemName',
value: 'already'
}
},
{
label: '拣货详情',
name: 'details',
query: {
name: 'tabItemName',
value: 'details'
}
}
]
}),
computed: {
getTabStyle() {
if (this.maxHeight && this.maxHeight >= 0) {
return `height:${
this.maxHeight}px;`
}
}
},
methods: {
// 通过name获取index 下标
getIndexToName(list,name,currentIndex){
let index_ = '';
for (let index = 0; index < list.length; index++) {
const item = list[index];
if(item.name===name){
index_ = index;
break;
}
}
return index_ === currentIndex;
}
},
watch: {
},
// 组件周期函数--监听组件挂载完毕
mounted() {
},
// 组件周期函数--监听组件数据更新之前
beforeUpdate() {
},
// 组件周期函数--监听组件数据更新之后
updated() {
},
// 组件周期函数--监听组件激活(显示)
activated() {
},
// 组件周期函数--监听组件停用(隐藏)
deactivated() {
},
// 组件周期函数--监听组件销毁之前
beforeDestroy() {
}
}
</script>
<style></style>