m***@qq.com
m***@qq.com
  • 发布:2021-09-23 15:47
  • 更新:2021-09-23 15:47
  • 阅读:592

【报Bug】钉钉小程序上动态添加的组件获取inject中的变量为undefined

分类:uni-app

产品分类: uniapp/小程序/阿里

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: windows 10

HBuilderX类型: 正式

HBuilderX版本号: 3.2.7

第三方开发者工具版本号: 1.15.7

基础库版本号:

项目创建方式: HBuilderX

示例代码:

Radio组件

<template>  
    <view class="checkbox" @click="check">  
        <view class="iconfont">{{ checked?'&#xe763;':'&#xe6d7;' }}</view>  
        <view class="text">  
            <slot />  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        props: {  
            checked: {  
                default: false,   
            },  
            value: {  
                default: '',  
            },   
        },  
        model: {  
            props: 'checked',  
            event: 'onChange'  
        },  
        inject: {  
            radioGroupContext: { default: undefined },  
        },  
        methods: {  
            check(e) {  
                console.log(this.radioGroupContext)  
                e.target.checked = false;  
                e.target.value = undefined;  
                if (this.radioGroupContext && this.radioGroupContext.onRadioChange) {  
                    this.radioGroupContext.emptyAll((node) => {  
                        node.$emit('update:checked', e);  
                    });  
                }  

                e.target.checked = !this.checked;  
                e.target.value = this.value;  
                this.$emit('onChange', e);  
                this.$emit('update:checked', e);  
                if (this.radioGroupContext && this.radioGroupContext.onRadioChange) {  
                    this.radioGroupContext.onRadioChange(e);  
                }  
            },  
        }  
    }  
</script>  

<style lang="scss" scoped>  
.checkbox{  
    display: inline-flex;  
    align-items: center;  
    font-size: 30rpx;  
    line-height: 0;  
    .iconfont{  
        font-size: 32rpx;  
        color: $blue;  
    }  
    .text{  
        margin-left: 10rpx;  
        color: $black5;  
    }  
}  
</style>  

RadioGroup组件

<template>  
    <view class="checkbox-group">  
        <slot />  
    </view>  
</template>  

<script>  
    export default {  
        name:"RadioGroup",  
        provide() {  
            return {  
                radioGroupContext: this,  
            };  
        },  
        data() {  
            return {  

            };  
        },  
        methods: {  
            onRadioChange(e) {  
                this.$emit('onChange', e)  
            },  
            emptyAll(callback) {  
                this.$children.forEach(node => {  
                    callback && callback(node)  
                })  
            }  
        }  
    }  
</script>  

<style lang="scss" scoped>  
.checkbox-group{  
    width: 100%;  
    display: flex;  
    justify-content: flex-end;  
}  
</style>

使用示例Demo

<template>  
    <view class="container">  
        <view class="form-contrl"  v-for="(item,i) in list" :key="i">  
            <MtRadioGroup class="ck-group" @onChange="onRadioChange">  
                <MtRadio :checked="item.isPlay" :value="true">是</MtRadio>  
                <MtRadio class="ck-item" :checked="!item.isPlay" :value="false">否</MtRadio>  
            </MtRadioGroup>  
        </view>  
    </view>  
</template>  

<script>  
    import MtRadioGroup from '../../components/RadioGroup/RadioGroup.vue'  
    import MtRadio from '../../components/Radio/Radio.vue'  
    import MtButton from '../../components/Button/Button.vue'  
export default {  
    components:{  
        MtRadioGroup,  
        MtRadio,  
                MtButton,  
    },  
    data() {  
        return {  
            list: [  
                {isPlay: true},  
                {isPlay: true},  
            ],  
        };  
    },  
    onLoad() {  
    },  
    methods: {  
        onRadioChange(e) {  
            console.log(e)  
        },  
        add() {  
            this.list.push({isPlay: true});  
        },  
    }  
};  
</script>  

<style lang="scss" scoped>  
.ck-group {  
    .ck-item {  
        margin-left: 40rpx;  
    }  
}  
.card{  
    height: 88rpx;  
    line-height: 88rpx;  
    padding: 30rpx;  
    border: 1px solid red;  
}  
</style>  

操作步骤:

请看示例代码

预期结果:

希望钉钉小程序操作结果,与微信小程序和H5一样

实际结果:

RadioGroup内的Raido->inject->radioGroupContext值为undefined

bug描述:

按照代码示例中的所示,
当list里新增一条数据时,
视图中RadioGroup会新增一个组件,
此时新增的RadioGroup内的Raido->inject->radioGroupContext值为undefined

2021-09-23 15:47 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复