uniapp 动态插槽 slot 兼容微信小程序 h5 APP

具体参考动态插槽名问题讨论和 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"><viewv-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: {// 必须要使用valuedefault: ''},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.lengthif (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>

uniapp 动态插槽 slot 兼容微信小程序 h5 APP相关推荐

uni-app 实现 fullpage 组件（适用于微信小程序,h5等）
uni-app 实现 fullpage 组件(适用于微信小程序,h5等) 业务需求. 本文github 源码地址 1.组件 src/components/FullPage/index.vue < ...
计算机毕业设计Python+uniapp扫码点餐微信小程序(小程序+源码+LW)
计算机毕业设计Python+uniapp扫码点餐微信小程序(小程序+源码+LW) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置: Pychram社区版+ pyth ...
uni-app(Vue.js)创建运行微信小程序
uni-app(Vue.js)创建运行微信小程序 1.全局安装 npm install -g @vue/cli 需要安装node,官方网站,否则提示npm不可用 2.创建uni-app 新建文件夹,选 ...
uniapp的打包：h5、微信小程序以及APP方式
uniapp的打包:h5.微信小程序以及APP方式 H5打包微信小程序打包 App打包本人用的是HBuilder编译器,学习uniapp时b站某位大大推荐的,我刚开始接触代码时候也用过,那时候并不 ...
基于uniapp+vue+微信小程序+安卓app电影院订票小程序H5网站设计
开发技术:uniapp + vue + ElementUI + 微信小程序 + 安卓app + Springboot 开发工具环境:HBuilder + 微信开发者工具 + VsCode + Idea ...
微信小程序/H5(UniApp)导入/导出excel文件
微信小程序/H5本地读写excel 准备工作 JS库本地导入并读取Excel(*.xls, *.xlsx) Excel文件示例选取文件并获得binary数据 Binary数据转json 本地构建并 ...
uni-app 微信小程序模仿 app二层楼功能
uni-app 微信小程序模仿 app二层楼功能先占个坑,今天应该写不完, 后续在慢慢补全更新终于写完了这个的计算量很大,我自己的安卓机测试的时候一卡一卡的,公司同事的iphone是没有问题 ...
计算机毕业设计Python+uniapp在线小说阅读平台微信小程序(小程序+源码+LW)
计算机毕业设计Python+uniapp在线小说阅读平台微信小程序(小程序+源码+LW) 该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程项目运行环境配置: Pychram社区版+ ...
二手市场回收基于微信小程序和app两种应用开发uniapp
回收纸皮书籍.服装饰品.箱包鞋帽.床上用品.塑料制品.其他 ,微信小程序.app开发源码下载地址:请点击下载
Java后端对接微信支付(微信小程序、APP、PC端扫码)非常全，包含查单、退款
首先我们要明确目标,我们点击微信支付官网 ,我们主要聚焦于这三种支付方式,其中JSPAI与APP主要与uniapp开发微信小程序与APP对接,而NATIVE主要与网页端扫码支付对接 1.三种支付统一 ...

uniapp 动态插槽 slot 兼容微信小程序 h5 APP

效果

子组件创建插槽

关键处代码

完整代码（样式缺失使用的是tailwindcss）

父组件使用插槽

使用关键代码

完整代码（样式缺失使用的是tailwindcss）

uniapp 动态插槽 slot 兼容微信小程序 h5 APP相关推荐

最新文章

热门文章

uniapp 动态插槽 slot 兼容微信小程序 h5 APP

效果

子组件 创建插槽

关键处代码

完整代码 （样式缺失 使用的是tailwindcss）

父组件 使用插槽

使用关键代码

完整代码 （样式缺失 使用的是tailwindcss）

uniapp 动态插槽 slot 兼容微信小程序 h5 APP相关推荐

最新文章

热门文章

子组件创建插槽

完整代码（样式缺失使用的是tailwindcss）

父组件使用插槽

完整代码（样式缺失使用的是tailwindcss）