android底部控件会被顶上去,安卓手机底部被软键盘顶起遮挡按钮的问题

问题描述

autosize

:maxlength='300'

row='5'

type="textarea"

class='textarea'

placeholder="请输入问题内容"

@focus="handleFocus"

@blur="handleBlur" />

{{contentLen}}/300

提问的内容将在7个工作日内进行回复

@click="submit" :class='{active: contentLen}'>确认提交

如需帮助:请拨打客服电话400-670-3600

title='提交成功'

desc='关于您的疑惑我们会尽快回复，请注意查收'

padding='15px 20px 30px'

@close='showSuccess = false'>

import { CellGroup, Field } from 'vant'

import { CheckForm } from '@/assets/js/mixin'

import successAlert from '@/components/success-alert'

export default {

name: 'consultAsk',

mixins: [CheckForm],

components: {

[CellGroup.name]: CellGroup,

[Field.name]: Field,

successAlert

},

data () {

return {

isCertification: false,

phone: '',

email: '',

msg: '',

showSuccess: false,

isShowFooter: true,

originalHeight: 0

}

},

computed: {

phoneNumber: {

get () {

let phone = this.phone

if (phone) {

phone = phone.replace(/\s/g, '').replace(/(\d{3})(\d{0,4})(\d{0,4})/, '$1 $2 $3').trim()

}

return phone

},

set (val) {

this.phone = val.replace(/\s/g, '')

}

},

contentLen () {

return this.msg.length

},

isSubmit () {

if (this.phone &&

this.checkTel(this.phone) &&

this.code) return true

return false

}

},

methods: {

// 处理部分安卓手机底部被软键盘顶起遮挡按钮的问题

handleFocus () {

if (!this.isIOS()) {

this.isShowFooter = false

}

},

// 处理部分安卓手机底部被软键盘顶起遮挡按钮的问题

handleBlur () {

setTimeout(() => {

this.isShowFooter = true

}, 200)

},

submit () {

if (!this.msg) {

this.$toast('请填写问题内容')

return

}

// this.$router.go(-1)

let url = `/portal/${localStorage.getItem('appid')}/user/${localStorage.getItem('openid')}/suggestion`

let params = {

classify: 0,

content: this.msg

}

this.$toast.loading({

duration: 0,

forbidClick: true,

message: '正在提交'

})

this.$posts(url, params).then(rsp => {

this.$toast.clear()

if (rsp.code === 200) {

// this.$toast(rsp.message)

this.showSuccess = true

this.msg = ''

// setTimeout(() => {

// this.$router.go(-1)

// }, 800)

} else {

this.$toast(rsp.message)

}

}, e => {

this.$toast.clear()

// this.$toast(e.response.data.message)

})

},

// 处理部分安卓手机底部被软键盘顶起遮挡按钮的问题

handleWindowSize () {

const resizeHeight =

document.documentElement.clientHeight || document.body.clientHeight

if (resizeHeight - 0 < this.originalHeight - 0) {

// 当软键盘弹起，在此处操作

this.isShowFooter = false

} else {

// 当软键盘收起，在此处操作

this.isShowFooter = true

}

}

},

mounted () {

this.originalHeight =

document.documentElement.clientHeight || document.body.clientHeight

window.addEventListener('resize', this.handleWindowSize)

},

created () {

this.isCertification = localStorage.getItem('isAuth')

this.phone = localStorage.getItem('userPhone') === 'undefined' ? '' : localStorage.getItem('userPhone')

this.email = localStorage.getItem('userEmail') === 'undefined' ? '' : localStorage.getItem('userEmail')

},

beforeDestroy () {

window.removeEventListener('resize', this.handleWindowSize)

}

}

.footer

position fixed

bottom 20px

width 100%

.footer-main

display flex

align-items center

flex-direction column

justify-content center

width 100%

.footer-title

pacity 0.6

font-family PingFangSC-Regular

font-size 14px

color #646363

margin-bottom 28px

letter-spacing 0.14px

img

width 93px

height 18px

.tip

margin-top 12px

color #646363

font-size 14px

.btn-wrap

margin-top 54px

display flex

justify-content center

.submit-btn

width 300px

height 45px

font-size 16px

color #fff

background-color #B8B9BB

&.active

color #231916

background-color #FFC700

.textarea

width 100%

.container

width 100%

height 100vh

background-color #F6F6F6

.ask_wrap >>>

.field_wrap

padding 14px 0

label

width 4em

textarea

font-size 16px

.ask_wrap

position relative

overflow hidden

padding 16px 16px

.ask-title

font-size 16px

color #000

margin-bottom 12px

.ask_field

padding 0 15px

border-radius $border-r

background-color $color-ipt-bg

.field

margin 0

border-bottom 1PX solid $color-bd

border-radius 0

.ask_txt

border-radius 4px

background-color #FEFEFE

height 145px

width 100%

padding 11px 0 24px

position relative

.text-tip

position absolute

right 15px

color #BEBEBE

bottom 10px

font-size 14px

>>> .van-field

background-color transparent

font-size 14px

height 110px

line-height 24px

padding 0px 15px

box-sizing border-box

>>> .van-cell::after

display none

>>> textarea

font-size 14px!important