项目中引入mui之后ios端输入框失去焦点之后页面回到最顶端

问题是这样的:

image.png

找了好多方法,终于发现是因为引入了mui导致的.找到别人的可行的方法:

https://blog.csdn.net/weixin_44010187/article/details/97641214
自己试了一下,文章里的第一种方法有效(第二种不知道为啥没生效)
然后,因为有很多个地方用到,所以写了一个公共文件:

image.png
内容如下:

// 阻止输入框失去焦点之后回到页面顶端(解决引入了mui之后会出现的bug)
export default{
    onBlur(){
        let oBody = document.getElementsByTagName('body')[0]
        oBody.classList.remove("mui-focusin")
    }
}

在别的文件里引入并使用这个公共方法:

<van-field v-model="this.bindingFeeval" clearable label="绑定优惠" @blur="blur" ></van-field>

import blur from '@/common/blur.js'

methods: {
    blur() {
        blur.onBlur()
      }
}
就可以啦~