在項目中使用原生的 prompt 彈出框來創(chuàng)建新內(nèi)容哆键，在其它環(huán)境下返回值均為輸入的內(nèi)容髓霞，只有在微信瀏覽器下（非X5內(nèi)核）出現(xiàn)異常卦睹；
代碼
createTag() {
const name = window.prompt('請輸入標簽名');
console.log(name)
if (name === '') {
return this.$message.error('標簽名不能為空');
}
if (name === null) {
return;
}
this.$store.commit('createTag', name);
}
觸發(fā) createTag 事件后
- 微信瀏覽器中：
在彈出框輸入內(nèi)容后，始終打印出的是null - 其它移動端瀏覽器及web端均正常打印
經(jīng)過谷歌后確定不是代碼的問題方库，是微信內(nèi)置瀏覽器對原生 prompt 的支持有問題
解決方法
-
微信瀏覽器手動開啟 X5 內(nèi)核
任意聊天框輸入 debugmm.qq.com/?forcex5=true 回車结序，然后點擊，即提示已開啟薪捍，此時重新測試笼痹，打印正常配喳；
image.png
但是這種方法治標不治本酪穿，你不能保證用戶的微信瀏覽器是否開啟 X5 內(nèi)核
- 只能放棄使用 window 自帶的原生 API
改用 element-ui 的 messageBox
messageBox 修改樣式
在移動端 messageBox 寬度過大，需要調(diào)整樣式
打開控制臺檢查元素會發(fā)現(xiàn) messageBox 彈出框時位于 body 下進行定位的晴裹，不在<div id="app">被济，所以在組件內(nèi)直接修改樣式無效，需要在 index.html 中的 head 標簽內(nèi)添加樣式涧团，并且要通過 !impotant 覆蓋掉默認樣式
<style>
@media screen and (max-width: 750px) {
.el-message-box {
width: 80% !important;
}
}
</style>
基本搞定√
