使用的van组件,回复框是从下弹出,可以设置盒子高度,也可以设置定位,直接设置盒子高度的话,可以省两行css代码
<!-- 回复评论弹框 -->
<van-popup
:show="handelScreenAddBox"
position="bottom"
suctom-style="height: auto"
@close="handelScreenAddBoxClose"
catchtouchmove
>
<!-- 使用的van组件,回复框是从下弹出,可以设置盒子高度,也可以设置定位,直接设置盒子高度的话,可以省两行css代码 -->
<div
class="addBoxBox"
:style="{height:areaBottom + 'px'}"
>
<!-- input内需要绑定:adjust-position="false"(键盘弹起时,是否自动上推页面) 然后分别注册个获取焦点和失去焦点事件 -->
<input
@change="(value)=>{newBox = value.mp.detail.value}"
:value="newBox"
:adjust-position="false"
@focus="areaFocus"
@blur="areaBlur"
>
<div @click="submitAddBoxOrReply">{{replyOrAddKeyWord}}</div>
</div>
</van-popup>
js
areaBottom: 60 // data中,areaBottom默认设置60,即盒子高度
areaFocus (e) { // input获取焦点后,让addBoxBox高度增加
if (this.isX) { // 判断是否为iPhoneX,因为是从底部弹出的,多做20px的适配
this.areaBottom = e.detail.height + 40 // 键盘的高度+addBoxBox的高度
} else {
this.areaBottom = e.detail.height + 60
}
},
areaBlur () {
this.areaBottom = 60 // 失去焦点后,让input归位
},
css
.addBoxBox
width 375px
padding 12.5px
background #fff
box-sizing border-box
display flex
justify-content space-between
input
width 277px
height 35px
background #F4F5FA
padding 10px 9px
box-sizing border-box
font-size 14px
line-height 15px
color #252525
resize none
div
width 55px
height 35px
border-radius 2px
background #2361FF
font-size 13px
color #ffffff
line-height 35px
text-align center
网友评论