在组件中使用movable-area 然后在子组件中使用 movable-view 拖动就变成了全屏的 怎么解决呢

uni-painter.vue 和 css

<template>  
    <view class="uni-painter-container">  

        <movable-area class="movable-area">  

            <movable-view style="width: 20px;height: 20px;background-color: #2C405A;" direction="all"></movable-view>  

            <block v-for="(item , index) in painterData" :key="index">  

                <block v-if="item.type == 'text'">  
                    <uni-painter-text :objData="item"></uni-painter-text>  
                </block>  

            </block>  

        </movable-area>  

    </view>  
</template>  

<script>  
    import uniPainterText from "@/components/uni-painter-text/uni-painter-text"  
    export default {  
        components:{  
            uniPainterText  
        },  
        props:{  
            painterData:{  
                type:Array,  
                default:[]  
            }  
        },  
        onReady() {  
            const query = uni.createSelectorQuery();  
            query.select('movable-area').boundingClientRect(data=>{  
                console.log(data);  
            })  
        },  
        data() {  
            return {  

            }  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    @import "./css/uni-painter.css";  
</style>

.uni-painter-container{  
    width: 50vw;  
    height: 50vh;  
    background-color: #FFF;  
    border-radius: 10px;  
}  

.movable-area {  
    width: 50vw;  
    height: 50vh;  
    border-radius: 10px;  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    overflow: hidden;  
    position: relative;  
}  

.text-content{  
    width: auto;  
    height: auto;  
    border: #2C405A 1px solid;  
}

uni-painter-text.vue 和 css

<template>  

    <movable-view :out-of-bounds="false" class="uni-painter-text-container" :x="x" :y="y" direction="all" @change="move">  
        {{objData.data}}  
    </movable-view>  
</template>  

<script>  
    export default {  
        props:{  
            objData:{  
                type:Object,  
                default:{}  
            }  
        },  
        created() {  
            this.x = this.objData.x  
            this.y = this.objData.y  
        },  
        data() {  
            return {  
                x:0,  
                y:0,  
            };  
        },  
        methods:{  
            move(event){  

            },  
        }  
    }  
</script>  

<style>  
@import "./css/uni-painter-text.css";  
</style>  

.uni-painter-text-container {  
    width: auto;  
    height: auto;  
    background-color: #4CD964;  
}