Vue項(xiàng)目中遇到的問(wèn)題

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()
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容