当前位置: 首页 > 知识库问答 >
问题:

uniapp不支持动态插槽?

仉姚石
2023-06-03

写了一个组件,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: '李四'},
        ]
    }
},

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

使用:

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

共有1个答案

解沈义
2023-06-03

参看

https://ask.dcloud.net.cn/article/38657
https://ask.dcloud.net.cn/article/37189
https://blog.csdn.net/weixin_43245095/article/details/123838856
 类似资料:
  • 问题内容: 我想知道是否可以在Go中动态创建变量? 我在下面提供了一个伪代码来说明我的意思。我将新创建的变量存储在一个切片中: 在循环的最后,切片应包含变量:variable1,variable2 … variable9 问题答案: Go没有动态变量。大多数语言中的动态变量都实现为Map(哈希表)。 因此,您可以在代码中包含以下地图之一,该地图可以完成您想要的操作 这是执行您的操作的Go代码 ht

  • 问题内容: 对于 Maria-DB* 和 MySQL 支持的 动态 列,我们具有JSON列类型。对于我们的项目之一,我们应该为 Maria- DB (不是 Mysql )实现一个数据库。 *** 使用包支持“ 动态列”。 如何可以覆盖orm中进行添加。在将此功能添加到此类中的包中,可以覆盖该类 框架中支持ORM的实现类: DynamicActiveRecord.php DynamicActiveQ

  • 本文向大家介绍YII动态模型(动态表名)支持分析,包括了YII动态模型(动态表名)支持分析的使用技巧和注意事项,需要的朋友参考一下 本文分析了YII动态模型(动态表名)支持机制。分享给大家供大家参考,具体如下: 给YII 框架增加动态模型支持 Yii框架中的数据模型使用静态机制,如果要使用模型方式操作某张数据表,就必须得事先创建数据表对应的模型类(位于 protected/models 目录下),

  • 对于我要构建的某些Azure功能,我有一个问题,那就是要选择什么样的服务计划。我曾尝试在西欧使用动态计划,但从门户来看,它不支持插槽。因此,尽管动态计划对于扩展非常有用,但我担心,当我们想要在生产-暂存-开发之间进行交换时,我们不能使用动态计划来实现这一点。另一方面,看看经典的服务计划,我可以得到一个支持插槽的S1-2-3。这里的问题是,我可能在一个服务应用程序上部署了10个功能,它们可能需要内存

  • Apache HTTP服务器是一个模块化的软件,管理员可以通过选择服务器中包含的模块进行功能增减。模块可以在编译时被静态包含进httpd二进制文件,也可以编译成独立于httpd二进制文件的动态共享对象(DSO)。DSO模块可以与服务器一起编译,也可以用Apache扩展工具(apxs)单独编译。 本文阐述如何使用DSO模块及其工作原理。 实现 相关模块 相关指令 mod_so LoadModule

  • 第 25 章 动态语言支持 目录 25.1. 介绍 25.2. 第一个例子 25.3. 定义动态语言支持的bean 25.3.1. 公共概念 25.3.2. JRuby beans 25.3.3. Groovy beans 25.3.4. BeanShell beans 25.4. 场景 25.4.1. Spring MVC控制器脚本化 25.4.2. Validator脚本化 25.5. 更多的