微信浏览器下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
事件后
- 微信浏览器中:
在弹出框输入内容后,始终打印出的是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>
基本搞定√