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

在项目中使用原生的 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 事件后

• 微信浏览器中：
  在弹出框输入内容后，始终打印出的是 null
• 其它移动端浏览器及web端均正常打印

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

解决方法

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

   
   image.png

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

2. 只能放弃使用 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>

基本搞定√