2***@qq.com
2***@qq.com
  • 发布:2023-08-20 10:57
  • 更新:2023-08-20 20:48
  • 阅读:184

在uni-drawer 抽屉中使用图片上传组件,选完图片后抽屉会被自动关闭, 有大佬知道怎么不会被自动关闭抽屉吗

分类:uni-app
2023-08-20 10:57 负责人:无 分享
已邀请:
喜欢技术的前端

喜欢技术的前端 - QQ---445849201

刚试了,没有关闭,你可以试试,检查一下你的代码

<template>  
    <view>  
        <uni-card is-full :is-shadow="false">  
            <text class="uni-h6">这是抽屉式导航组件使用示例,可以指定菜单左侧或者右侧弹出(仅初始化生效),组件内部可以放置任何内容。点击页面按钮即可显示导航菜单。</text>  
        </uni-card>  

        <uni-section title="左侧滑出" type="line">  
            <view class="example-body">  
                <button type="primary" @click="showDrawer('showLeft')"><text class="word-btn-white">显示Drawer</text>  
                </button>  
                <uni-drawer ref="showLeft" mode="left" :width="320" @change="change($event,'showLeft')">  
                    <!-- <view class="close">  
                        <button @click="closeDrawer('showLeft')"><text class="word-btn-white">关闭Drawer</text></button>  
                    </view> -->  
                    <uni-section title="只选择图片" type="line">  
                        <view class="example-body">  
                            <uni-file-picker limit="9" ref="files" :auto-upload="false" title="最多选择9张图片"></uni-file-picker>  
                        </view>  
                        <button @click="up">上传</button>  
                    </uni-section>  
                </uni-drawer>  
            </view>  
        </uni-section>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                showRight: false,  
                showLeft: false  
            }  
        },  
        methods: {  
            up() {  
                console.log(this.$refs)  
                this.$refs.files.upload()  
            },  
            confirm() {},  
            // 打开窗口  
            showDrawer(e) {  
                this.$refs[e].open()  
            },  
            // 关闭窗口  
            closeDrawer(e) {  
                this.$refs[e].close()  
            },  
            // 抽屉状态发生变化触发  
            change(e, type) {  
                console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));  
                this[type] = e  
            }  
        },  
        onNavigationBarButtonTap(e) {  
            if (this.showLeft) {  
                this.$refs.showLeft.close()  
            } else {  
                this.$refs.showLeft.open()  
            }  
        },  
        // app端拦截返回事件 ,仅app端生效  
        onBackPress() {  
            if (this.showRight || this.showLeft) {  
                this.$refs.showLeft.close()  
                this.$refs.showRight.close()  
                return true  
            }  
        }  
    }  
</script>  

<style lang="scss">  
    .example-body {  
        padding: 10px;  
    }  

    .scroll-view {  
        /* #ifndef APP-NVUE */  
        width: 100%;  
        height: 100%;  
        /* #endif */  
        flex: 1  
    }  

    // 处理抽屉内容滚动  
    .scroll-view-box {  
        flex: 1;  
        position: absolute;  
        top: 0;  
        right: 0;  
        bottom: 0;  
        left: 0;  
    }  

    .info {  
        padding: 15px;  
        color: #666;  
    }  

    .info-text {  
        font-size: 14px;  
        color: #666;  
    }  

    .info-content {  
        padding: 5px 15px;  
    }  

    .close {  
        padding: 10px;  
    }  
</style>  

要回复问题请先登录注册