在项目中使用原生的 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 的支持有问题
解决方法
-
微信浏览器手动开启 X5 内核
任意聊天框输入 debugmm.qq.com/?forcex5=true 回车，然后点击，即提示已开启，此时重新测试，打印正常；
image.png
但是这种方法治标不治本，你不能保证用户的微信浏览器是否开启 X5 内核
- 只能放弃使用 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>
基本搞定√
