1.(Android)input輸入完內(nèi)容后點(diǎn)擊空白處input不失焦,連續(xù)點(diǎn)擊空白處時(shí)軟鍵盤(pán)反復(fù)彈出&收起(textarea同理)
解:在入口文件main.js中增加一段js來(lái)解決該BUG;
document.querySelector('body').addEventListener('touchend', function (e) {
let len = document.querySelectorAll('input').length || 0
if (len < 1) {
return
}
let tagName = e.target.tagName.toLowerCase()
if (tagName !== 'input') {
for (let i = 0; i < len; i++) {
document.querySelectorAll('input')[i].blur()
}
}
})
2.關(guān)于刷新頁(yè)面后vuex中的數(shù)據(jù)丟失
解:可以使用vuex-persist來(lái)持久化vuex數(shù)據(jù)
首先安裝vuex-persist
npm install -S vuex-persist
然后在store文件夾中新建vuex-persist.js,寫(xiě)入如下內(nèi)容
import VuexPersistence from 'vuex-persist'
const vuexLocal = new VuexPersistence({
key: '__project-name__',
storage: window.sessionStorage
})
export default vuexLocal
最后在store文件夾內(nèi)的index.js中引入調(diào)用即可
import vuexPersist from './vuex-persist'
const vuexPersistPlugin = vuexPersist.plugin
export default new Vuex.Store({
plugins: [vuexPersistPlugin]
})
3.vuex-persist和vuex logger一起使用時(shí)vue.min.js中forEach處報(bào)錯(cuò)?
解:解決forEach報(bào)錯(cuò)
import Vue from 'vue'
import Vuex from 'vuex'
import createLogger from 'vuex/dist/logger'
import vuexPersist from './vuex-persist'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
const logger = [createLogger()]
const vuexPersistPlugin = vuexPersist.plugin
const vuexPlugins = [
vuexPersistPlugin,
logger
]
console.log(vuexPlugins)
export default new Vuex.Store({
plugins: vuexPlugins
})
// console結(jié)果[?, Array(1)]
解決方法:debug情況下改為非數(shù)組即可
const logger = createLogger()
const vuexPlugins = debug ? [vuexPersistPlugin, logger] : [vuexPersistPlugin]
4.修復(fù)ios12+特定版本微信端軟鍵盤(pán)收起后底部留白
解:在入口文件main.js中增加一段js來(lái)解決該BUG;
function fixWeChatView () {
(/iphone|ipod|ipad/i.test(navigator.appVersion)) && document.addEventListener('blur', (e) => {
// 這里加了個(gè)類(lèi)型判斷,因?yàn)閍等元素也會(huì)觸發(fā)blur事件
[ 'input', 'textarea' ].includes(e.target.localName) && document.body.scrollIntoView(false)
}, true)
}
fixWeChatView()