uniapp不支持动态插槽?

写了一个组件,h5、模拟器能正常显示,但是打包成Android包安装到手机上会导致整个页面都白屏了,没法正常显示,已经定位到就是该组件的问题,把组件改写去掉动态插槽打包后就没问题,但是代价就是组件通用性不高,可能需要根据业务定制不同的组件(绝大部分代码差不多),请问有没有啥办法处理这问题?

tags 如下:

<template>
    <view class="list-wrapper">
        <view class="tag-common" @click="handleClick(t)" v-for="t in list" :key="t[keyName]" :class="[t[keyName] == selected ? 'active' : '', mode == 'list' ? 'tag-list' : 'tag']">
            <slot :name="t[keyName]" :data='t'>{{ t.label }}</slot>
        </view>
    </view>
</template>

<script>
export default {
    name: 'tags',
    model: {
        prop: 'selected',
        event: 'change'
    },    
    props: {
        selected: {
            type: [String, Number],
            default: null
        },
        items: { //格式要求 [{value: 1, label: ''}]————label内容不能重复
            type: Array,
            default: () => {
                return []
            }
        },
        mode: {
            type: String,
            default: 'tag' // tag、list
        },
        keyName: {
            type: String,
            default: 'value'
        }
    },
    watch: {
        items: {
            handler(val) {
                this.list = JSON.parse(JSON.stringify(this.items))
            },
            immediate: true,
            deep: true
        },
    },
    data () {
        return {
            list: []
        }
    },
    methods: {
        handleClick(tag) {
            this.$emit('change', tag[this.keyName])
        },
    },
}
</script>

<style lang="scss" scoped>
.list-wrapper{
    padding: 0 10px;
    padding-left: 0;
    background: #fff;
    .tag-common {
        display: inline-block;
        padding: 6px;
        cursor: pointer;
        box-sizing: border-box;
        // border-radius: 5px;
        // margin: 2px;
        position: relative;
    }
    .tag{
        &.active {
            // background: #DCDFE6;
            color: #409eff;
        }
        &.active::after{
            content: " ";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 2px;
            background: #409eff;
            // border-bottom: 2px solid #409eff;
        }
        &:hover{
            // background: #DCDFE6;
            color: #409eff;
        }        
    }
    .tag:not(:last-child) {
        margin-right: 10px;
    }
    
    .tag-list{
        display: block;
        // height: 40px;
        // line-height: 40px;
        // padding: 0 4px;
        width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        border-radius: 5px;

        &.active {
            background: #DCDFE6;
        }
        &:hover{
            background: #DCDFE6;
        }  
    }
}
</style>

使用方式:

<tags mode="list" class="tagsList" :items="pers" v-model="currentEmployeeId">
    <template v-for="(v, idx) in pers" :slot="v.value" slot-scope="scope">
        <view class="flex" :key="idx">
            <text class="name omit uni-mx-2">{{ v.label }}</text>
        </view>
    </template>
</tags>
data() {
    return {
        currentEmployeeId: '1111',
        pers: [
            {value: '1111', label: '张三'},
            {value: '2222', label: '李四'},
        ]
    }
},

更新后的使用方式:
组件:

使用:

仍然不行,显示的始终是组件里面的默认插槽内容。

阅读 4.2k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题