c***@163.com
c***@163.com
  • 发布:2024-07-29 18:55
  • 更新:2024-07-31 14:15
  • 阅读:107

【报Bug】自定义组件设置v-model后,H5正常,小程序失效

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Windows

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

第三方开发者工具版本号: VSCode(1.89.0)+微信开发工具(1.06.2301160)

基础库版本号: 2.0.2-4020420240722001

项目创建方式: CLI

CLI版本号: 5.0.8

示例代码:
<template>  
    <view v-show="isShowPopup" class="signature-wrap">  
        <view class="signature-tip" ref="tip">请在此处签名</view>  
        <view class="signature-footer">  
            <u-button plain type="primary" @click="isShowPopup = false">取消</u-button>  
            <u-button plain type="primary" @click="clickClearButton">重签</u-button>  
            <u-button type="primary" @click="clickConfirmButton">确定</u-button>  
        </view>  
    </view>  
</template>  

<script>  

export default {  
    name: 'ft-signature',  
    model: {  
        prop: 'isShow',  
        event: 'updateIsShow'  
    },  
    props: {  
        isShow: {  
            type: Boolean,  
            default: false  
        }  
    },  
    data() {  
        return {  
            debouncingTimer: ''  
        }  
    },  
    computed: {  
        isShowPopup: {  
            get() {  
                return this.isShow  
            },  
            set(value) {  
                this.$emit('updateIsShow', value)  
            }  
        }  
    },  
    methods: {  
        clickClearButton() {  
        },  
        clickConfirmButton() {  
            this.isShowPopup = false  
            this.$refs.signature.canvasToTempFilePath({  
                success: r => {  
                    const {isEmpty, tempFilePath} = r  
                    this.$emit('signed', isEmpty ? '' : tempFilePath)  
                }  
            })  
        }  
    }  
}  
</script>  

<style lang="scss" scoped>  
.signature-wrap {  
    position: fixed;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    z-index: 999;  
    background-color: yellow;  
    .signature-tip {  
        position: absolute;  
        top: 50%;  
        left: 50%;  
        transform: translate(-50%, -50%);  
        font-size: 28px;  
        color: var(--supportColor);  
    }  
    .signature-footer {  
        position: absolute;  
        bottom: 20px;  
        left: 50%;  
        transform: translateX(-50%);  
        display: flex;  
        column-gap: 10px;  
        .u-button {  
            width: 160px;  
            height: 44px;  
        }  
    }  
}  
</style>

操作步骤:

v-model在小程序不生效

预期结果:

v-model能在小程序正常生效

实际结果:

v-model在小程序不生效

bug描述:

自定义组件通过v-model设置双向绑定后,在H5平台一切正常,在小程序平台失效,代码见附件

2024-07-29 18:55 负责人:无 分享
已邀请:
BFC

BFC

你好,小程序不支持自定义model语法, 建议在小程序用prop: value 代替 prop: isShow

要回复问题请先登录注册