1.（Android）input输入完内容后点击空白处input不失焦，连续点击空白处时软键盘反复弹出&收起（textarea同理）
解：在入口文件main.js中增加一段js来解决该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.关于刷新页面后vuex中的数据丢失
解：可以使用vuex-persist来持久化vuex数据
首先安装vuex-persist
npm install -S vuex-persist
然后在store文件夹中新建vuex-persist.js，写入如下内容
import VuexPersistence from 'vuex-persist'
const vuexLocal = new VuexPersistence({
key: '__project-name__',
storage: window.sessionStorage
})
export default vuexLocal
最后在store文件夹内的index.js中引入调用即可
import vuexPersist from './vuex-persist'
const vuexPersistPlugin = vuexPersist.plugin
export default new Vuex.Store({
plugins: [vuexPersistPlugin]
})
3.vuex-persist和vuex logger一起使用时vue.min.js中forEach处报错？
解：解决forEach报错
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结果[ƒ, Array(1)]
解决方法：debug情况下改为非数组即可
const logger = createLogger()
const vuexPlugins = debug ? [vuexPersistPlugin, logger] : [vuexPersistPlugin]
4.修复ios12+特定版本微信端软键盘收起后底部留白
解：在入口文件main.js中增加一段js来解决该BUG；
function fixWeChatView () {
(/iphone|ipod|ipad/i.test(navigator.appVersion)) && document.addEventListener('blur', (e) => {
// 这里加了个类型判断，因为a等元素也会触发blur事件
[ 'input', 'textarea' ].includes(e.target.localName) && document.body.scrollIntoView(false)
}, true)
}
fixWeChatView()
