微信浏览器下window.prompt返回值为null问题

2022-02-17  本文已影响0人  Yandhi233

在项目中使用原生的 prompt 弹出框来创建新内容,在其它环境下返回值均为输入的内容,只有在微信浏览器下(非X5内核)出现异常;

代码

createTag() {
    const name = window.prompt('请输入标签名');
    console.log(name)
    if (name === '') {
      return this.$message.error('标签名不能为空');
    }
    if (name === null) {
      return;
    }
    this.$store.commit('createTag', name);
  }

触发 createTag 事件后

经过谷歌后确定不是代码的问题,是微信内置浏览器对原生 prompt 的支持有问题

解决方法

  1. 微信浏览器手动开启 X5 内核
    任意聊天框输入 debugmm.qq.com/?forcex5=true 回车,然后点击,即提示已开启,此时重新测试,打印正常;


    image.png

但是这种方法治标不治本,你不能保证用户的微信浏览器是否开启 X5 内核

  1. 只能放弃使用 window 自带的原生 API
    改用 element-ui 的 messageBox

messageBox 修改样式

在移动端 messageBox 宽度过大,需要调整样式

打开控制台检查元素会发现 messageBox 弹出框时位于 body 下进行定位的,不在<div id="app">,所以在组件内直接修改样式无效,需要在 index.html 中的 head 标签内添加样式,并且要通过 !impotant 覆盖掉默认样式

<style>
    @media screen and (max-width: 750px) {
      .el-message-box {
        width: 80% !important;
      }
    }
  </style>

基本搞定√

上一篇下一篇

猜你喜欢

热点阅读