很多人會遇到 H5 點擊input 安卓端會把底部tab樣式彈上去如何解決這個問題 特別是安卓端會經常遇到
但是網上又沒有特別完美的方法
我這裏自己弄了一個解決方案
導入main.js
通過actions 異步觸發同步 mutations
注意這裏 actions和mutations都是方法
所以名字要不一樣
getters 是計算屬性 computed
因爲有些參數拿到後可能需要加減乘除等複雜計算
通過getters定義一個屬性 返回值
拿到state裏面的某個值進行處理 return 返回
這個屬性值可以和state裏面的屬性名一樣
因爲有很多方法屬性是重複的所以我們可以用到mixins
import 導入輔助函數
mapGetters Actions 是在mixins.js 最外面
這裏的mounted console 打印是否混入成功
computed 混入屬性hidshow
下面也是如此 …mapActions[‘xx’]
混入方法之後就直接可以使用this.xx 並且可以傳入參數給Vuex
其中輔助函數引入的東西還可以取別名 直接使用
使用的時候 直接混入
然後blur focus方法用上
blur失去焦點 focus焦點
監聽input 焦點的變化 渲染tab
然後在tab頁面的控制頁 使用getters裏面的值 進行判斷控制 tab的顯示
產生 components的原因就是 使用了vuex 但是
vue和vue-router的版本不匹配
卸載node-modules之後重新安裝回來就可以了
可能有版本衝突問題
事件委託進行美化
重點blur方法就是focusout focus方法就是focusin 在這裏
封裝在mixins 就可以動態控制按鈕的顯示了
只需要給每一個input 添加上一個class=“input”
如果覺得可以的話 幫你解決了的話 點贊三連 多分享 麼麼噠