sonicsunsky
sonicsunsky
  • 发布:2021-11-26 15:40
  • 更新:2021-12-20 13:44
  • 阅读:879

uni-app vue3 微信小程序端不支持v-model:xxx属性双向绑定

分类:uni-app

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

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: Mac big sur 11.6.1

HBuilderX类型: Alpha

HBuilderX版本号: 3.2.15

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

基础库版本号: 2.21.0

项目创建方式: HBuilderX

示例代码:
<i-bottom-popup v-model:show="showBottomPopup">  
            <view style="height:400rpx;"><text>测试v-model:xxx语法</text></view>  
</i-bottom-popup>  

<template>  
    <view @touchmove.stop.prevent>  
        <view  
            class="tui-bottom-popup"  
            :class="{ 'tui-popup-show': show, 'tui-popup-radius': radius }"  
            :style="{ backgroundColor: backgroundColor, height: height ? height + 'rpx' : 'auto', zIndex: zIndex, transform: `translate3d(0, ${show ? translateY : '100%'}, 0)` }"  
        >  
            <slot></slot>  
        </view>  

        <view v-if="mask" class="tui-popup-mask" :class="[show ? 'tui-mask-show' : '']" :style="{ zIndex: maskZIndex }" @tap="handleClose"></view>  
    </view>  
</template>  

<script>  
import { defineComponent, computed, watch } from 'vue'  

export default defineComponent({  
    name: 'iBottomPopup',  
    emits: ['update:show', 'close'],  
    props: {  
        //是否需要mask  
        mask: {  
            type: Boolean,  
            default: true  
        },  
        //控制显示  
        show: {  
            type: Boolean,  
            default: false  
        },  
        //背景颜色  
        backgroundColor: {  
            type: String,  
            default: '#fff'  
        },  
        //高度 rpx  
        height: {  
            type: Number,  
            default: 0  
        },  
        //设置圆角  
        radius: {  
            type: Boolean,  
            default: true  
        },  
        zIndex: {  
            type: [Number, String],  
            default: 997  
        },  
        maskZIndex: {  
            type: [Number, String],  
            default: 996  
        },  
        //弹层显示时,垂直方向移动的距离  
        translateY: {  
            type: String,  
            default: '0'  
        }  
    },  
    setup(props, context) {  
        const { emit } = context  

        watch(  
            () => props.show,  
            nVal => {  
                console.log('watch: ', nVal)  
                emit('update:show', nVal)  
            }  
        )  

        const handleClose = () => {  
            if (!props.show) {  
                return  
            }  
            emit('update:show', false)  
        }  

        return {  
            handleClose  
        }  
    }  
})  
</script>  

<style lang="scss" scoped>  
.tui-bottom-popup {  
    width: 100%;  
    position: fixed;  
    left: 0;  
    right: 0;  
    bottom: 0;  
    opacity: 0;  
    transform: translate3d(0, 100%, 0);  
    transform-origin: center;  
    transition: all 0.3s ease-in-out;  
    min-height: 30rpx;  
}  

.tui-popup-radius {  
    border-top-left-radius: 24rpx;  
    border-top-right-radius: 24rpx;  
    padding-bottom: env(safe-area-inset-bottom);  
    overflow: hidden;  
}  

.tui-popup-show {  
    opacity: 1;  
}  

.tui-popup-mask {  
    position: fixed;  
    top: 0;  
    left: 0;  
    right: 0;  
    bottom: 0;  
    background-color: rgba(0, 0, 0, 0.6);  
    transition: all 0.3s ease-in-out;  
    opacity: 0;  
    visibility: hidden;  
}  

.tui-mask-show {  
    opacity: 1;  
    visibility: visible;  
}  
</style>  

操作步骤:

通过设置showBottomPopup为true不能正常显示底部弹窗,点击遮罩层关闭也无法隐藏弹窗

预期结果:

可以通过v-model:show双向绑定显示隐藏底部弹窗

实际结果:

无法正常双向绑定显示隐藏底部弹窗

bug描述:

uni-app vue3 微信小程序端不支持v-model:xxx属性双向绑定

2021-11-26 15:40 负责人:无 分享
已邀请:
DCloud_UNI_Anne

DCloud_UNI_Anne

后续优化,已加分,感谢您的反馈!

DCloud_UNI_FXY

DCloud_UNI_FXY

更新至最新HBuilderX Alpha

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