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

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

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

PC开发环境操作系统：Mac

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>