关于uni-app 在弹出Popup时让input自动获取焦点的问题

最新推荐文章于 2024-08-13 14:16:28 发布

wwf1225

最新推荐文章于 2024-08-13 14:16:28 发布

阅读量1.3w

点赞数

本文链接：https://blog.csdn.net/wwf1225/article/details/101527999

版权

关于uni-app 在弹出Popup时让input自动获取焦点的问题

分类：uni-app

input popup uniapp

在微信小程序的时候有时正常弹出，有时不弹出，有时弹出后input与软键盘中间有一大块空白区域，不知道哪里出了问题，各位大佬给看看，小弟谢过！
代码片段：

复制代码<template>  
    <view>  
        <view class="bottomWrapper">  
            <view>  
                <view class="buttonWrapper" @click="commentClick">  
                    <uniIcon type='chat' color="#333" size="24"></uniIcon>  
                    <view>评论</view>  
                </view>  
            </view>  
        </view>  
        <uni-popup ref="popup" type="bottom" :change='handelChange'>  
            <view class="publishWrapper">  
                <input type="text" confirm-type='done' v-model="myText" placeholder='说点什么吧' :focus='setFocus' cursor-spacing='15px' />  
                <view :style="{color:publishColor}">发布</view>  
            </view>  

        </uni-popup>  
    </view>  
</template>

数据：

复制代码    import uniIcon from "@dcloudio/uni-ui/lib/uni-icon/uni-icon"  
    import uniPopup from "@dcloudio/uni-ui/lib/uni-popup/uni-popup"  
    export default {  
        data() {  
            return {  
                myText:'',  
                setFocus:false  
            };  
        },  
        computed:{  
            publishColor(){  
                if(this.myText){  
                    return '#ff4049'  
                }else{  
                    return '#999'  
                }  
            }  
        },  
        components:{uniIcon, uniPopup},  
        methods:{  
            commentClick(){  
                this.$refs.popup.open()  
                this.setFocus=true  
            },  
            handelChange(){  

            }  
        }  
    }

css样式：

复制代码    .bottomWrapper{  
    position: fixed;  
    bottom: 0;  
    background-color: #fff;  
    width: 100%;  
    padding: 16rpx 10rpx;  
    border-top: 1px solid $uni-border-color;  
}  
.buttonWrapper{  
    text-align: center;  
    display: flex;  
    justify-content:center;  
    align-items:center;  
    font-size: $uni-font-size-base;  
    color: $uni-text-color;  
}  
.publishWrapper{  
    display: flex;  
    // padding: 6rpx;  
    justify-content: space-between;  
    input{  
        border: 1px solid $uni-border-color;  
        border-radius: 40rpx;  
        padding-left: 20rpx;  
        width: 70%;  
    }  
    view{  
        width: 20%;  
        text-align: center;  
    }  
}

部分截图：