vue 项目难点_vue项目中遇到的问题汇总
前：項目用到的技術棧為webpack+vue2.x+pug+stylus+elementUI
1、IE9中， 請求服務器數據并用v-for渲染option標簽出現只顯示第一個字的問題
解決方法：
/**
* 強制重繪頁面的select 輸入框，解決IE9只顯示單個字符串問題
* @param useNextTick {Boolean} 使用在vm next tick 處理， 默認true
*/
forceRedrawSelect: function (useNextTick) {
useNextTick = useNextTick !== false;
if (!browser.isIE)
return;
var _this = this;
var redraw = function () {
var $select = _this.$("select");
$select.css('width', 0);
$select.css('width', ''); // remove from style tag
};
if(useNextTick)
this.$nextTick(redraw);
else
redraw()
},
2、IE9中，elementUI的el-input刪除操作無法觸發數據變動監聽
解決辦法：加入ie9input事件墊片
cnpm install --save ie9-oninput-polyfill
3、vue自定義指令判斷時機問題
// 錯誤寫法
'null' (el) {
if (el.innerHTML === '' || el.innerHTML === '--') {
addClass(el, 'null-handler')
} else {
removeClass(el, 'null-handler')
}
},
因為無法控制標簽內容的渲染時機導致判斷出錯，所以應該去判斷value
// 正確寫法
'null' (el, { value, oldValue }) {
if (oldValue === value) return
if (value === '' || value === '--') {
addClass(el, 'null-handler')
} else {
removeClass(el, 'null-handler')
}
},
4、el-input手動獲取焦點問題
情景：輸入框一開始是隱藏的，點擊按鈕顯示輸入框并獲取焦點
把手動獲取焦點那段代碼寫在$nextTick()就好了
手動獲取焦點這個操作我也記錄一下：
首先給標簽加個屬性ref="searchBox"(名字隨便起),然后點擊按鈕把控制顯示的字段賦值true，接著寫下這幾行代碼就好了
this.$nextTick(() => {
this.$refs.searchBox.focus()
})
image.png
image.png
5、mounted鉤子函數中請求數據導致頁面閃屏問題
其實就是加載時機問題，放在created里會比mounted觸發早一點，如果在頁面掛載完之前請求完成的話就不會看到閃屏了
6、IE9中template標簽使用問題
之前在tr標簽里面用template標簽包裹td標簽，出現了比較嚴重的UI錯亂，
所以。。IE9不能在tr標簽中使用template標簽
7、純色svg轉換成字體(用了panda這個軟件)，跟預期不符
這個應該是跟svg的描繪路徑什么的有關，讓設計師同學重新出一個圖吧。。
8、一個奇葩bug，開發環境elementUI的表格排序圖標不顯示，但是在線上環境和其他同事的開發環境沒問題
// 是由于mac沒安裝xcode導致依賴包install出錯(出錯了居然還能啟動。。)
// 輸入以下命令，如果沒安裝xcode系統就會提示你安裝了
// npm rebuild node-sass --force
后來又出現了問題， 然后我升級了npm版本解決
9、el-table用v-if隱藏顯示列和預期不符問題
給el-table-column加一個key屬性，:key="Math.random()"或者其他的，確保每列的key值不同就可以了
10、在使用el-table的時候有的時候需要對表格中的數據做處理，需要用到filter，雖然官方也有提供過濾的方法(filter-method)，但是還是用自定義列，然后用filter復用性好一些
{{scope.row.date | dateConvert}}
11、在使用el-table的時候，有時候需要自定義表頭，比如在表頭中加個問號，然后hover有個提示信息
這里就需要用到官方提供的render-header屬性了，首先給需要自定義表頭的列加一個屬性，綁定一個方法
HTML中
{{scope.row.date | dateConvert}}
methods中
renderDate (createElement, { column }) {
return createElement('div', {style: {'margin-top': '5px'}}, [
column.label,
createElement(
'el-tooltip',
{
class: 'header-tip',
props: {
effect: 'light',
placement: 'bottom-end',
enterable: false,
content: '日期'
}
}, [
createElement('i', {
class: 'el-icon-question'
})
]
)
])
}
12、用forEach遍歷NodeList，ie報錯“nodelist為對象，不支持forEach屬性”
因為ie認為NodeList是一個對象，不支持forEach方法遍歷，解決方法很簡單
// es6寫法
let nodeList = [...this.$el.querySelectorAll('[id^=productItem]')]
// es5寫法
let nodeList = Array.prototype.slice.call(this.$el.querySelectorAll('[id^=productItem]'))
總結
以上是生活随笔為你收集整理的vue 项目难点_vue项目中遇到的问题汇总的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 手机fast boot什么意思
- 下一篇： vue根据url获取内容axios_vu