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

╰+攻爆jí腚メ 2023-08-17 15:47 111阅读 0赞

# 关于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;  
        }  
    }

部分截图：

[![format_png][]][format_png 1]

[![format_png 2][]][format_png 2 1]

[![format_png 3][]][format_png 3 1]

[input]: https://ask.dcloud.net.cn/topic/input
[popup]: https://ask.dcloud.net.cn/topic/popup
[uniapp]: https://ask.dcloud.net.cn/topic/uniapp
[format_png]: /images/20230810/54af16a90f4a4a3fa7e71d858e7e93a5.png
[format_png 1]: https://img-cdn-qiniu.dcloud.net.cn/uploads/questions/20190812/59ba3053a0a0c28b2bdc59a74b9391ab.jpg
[format_png 2]: /images/20230810/1e496c59e6f44fc9a127db6f925352bc.png
[format_png 2 1]: https://img-cdn-qiniu.dcloud.net.cn/uploads/questions/20190812/f07b7a1b909fc1f45e53d115b33a365d.jpg
[format_png 3]: /images/20230810/33c4068231604d30ad9b1304c2db6f03.png
[format_png 3 1]: https://img-cdn-qiniu.dcloud.net.cn/uploads/questions/20190812/61a8d694a262ed14be6c3d8e154f56b5.jpg