前言

　　之前專案原本是隻做PC端的，但是可能主管看我太閒，於是讓我改成適配H5，我emmmmm。

　　大家也知道elementUI本來是做PC端為主的，如果引用到H5會有各種各樣的問題，例如

問題一：

　　大家看到了，我們手機的鍵盤沒有彈出來，原因在於elementUI的工程師們，考慮到選擇完某一選項之後，在移動端鍵盤不會自動收回，於是給我們的輸入框加上了read-only，於是乎我們手機的鍵盤就無法彈出。

解決方式：

　　el-select上加上@focus="closeReadOnly"@blur="closeReadOnly"，然後寫下面的方法

closeReadOnly() {
      
 
// 去除el-select預設的readOnly，否則移動端下拉框出不來
      Array.from(document.getElementsByClassName('el-select')).forEach(item => {
        item.children[0].children[0].removeAttribute('readOnly');
        item.children[0].children[0].onblur = function () {
          let _this = this;
          _this.removeAttribute(
 
'readOnly');
        }
      });
    },

問題二：

　　el-select右手邊多出空白，文字過長會被隱藏

　　這個問題是因為右手邊的icon，在觸發點選事件之後，input的padding-right會被更改，導致空白。

解決方式：

closeReadOnly(e) {
    e.target.style.paddingRight = '1.5rem';
},

結尾

　　目前主要遇到比較蛋疼的問題就是上面兩個，其他的都是小問題就不拿出來講了，如果後續有比較難解決的問題，再更新這篇文章進行補充。