前：項(xiàng)目用到的技術(shù)棧為webpack+vue2.x+pug+stylus+elementUI

1、IE9中， 請(qǐng)求服務(wù)器數(shù)據(jù)并用v-for渲染option標(biāo)簽出現(xiàn)只顯示第一個(gè)字的問題

解決方法：

/**

* 強(qiáng)制重繪頁面的select 輸入框，解決IE9只顯示單個(gè)字符串問題

* @param useNextTick {Boolean} 使用在vm next tick 處理， 默認(rèn)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刪除操作無法觸發(fā)數(shù)據(jù)變動(dòng)監(jiān)聽

解決辦法：加入ie9input事件墊片

cnpm install --save ie9-oninput-polyfill

3、vue自定義指令判斷時(shí)機(jī)問題

// 錯(cuò)誤寫法

'null' (el) {

if (el.innerHTML === '' || el.innerHTML === '--') {

addClass(el, 'null-handler')

} else {

removeClass(el, 'null-handler')

}

},

因?yàn)闊o法控制標(biāo)簽內(nèi)容的渲染時(shí)機(jī)導(dǎo)致判斷出錯(cuò)，所以應(yīng)該去判斷value

// 正確寫法

'null' (el, { value, oldValue }) {

if (oldValue === value) return

if (value === '' || value === '--') {

addClass(el, 'null-handler')

} else {

removeClass(el, 'null-handler')

}

},

4、el-input手動(dòng)獲取焦點(diǎn)問題

情景：輸入框一開始是隱藏的，點(diǎn)擊按鈕顯示輸入框并獲取焦點(diǎn)

把手動(dòng)獲取焦點(diǎn)那段代碼寫在$nextTick()就好了

手動(dòng)獲取焦點(diǎn)這個(gè)操作我也記錄一下：

首先給標(biāo)簽加個(gè)屬性ref="searchBox"(名字隨便起),然后點(diǎn)擊按鈕把控制顯示的字段賦值true，接著寫下這幾行代碼就好了

this.$nextTick(() => {

this.$refs.searchBox.focus()

})

image.png

image.png

5、mounted鉤子函數(shù)中請(qǐng)求數(shù)據(jù)導(dǎo)致頁面閃屏問題

其實(shí)就是加載時(shí)機(jī)問題，放在created里會(huì)比mounted觸發(fā)早一點(diǎn)，如果在頁面掛載完之前請(qǐng)求完成的話就不會(huì)看到閃屏了

6、IE9中template標(biāo)簽使用問題

之前在tr標(biāo)簽里面用template標(biāo)簽包裹td標(biāo)簽，出現(xiàn)了比較嚴(yán)重的UI錯(cuò)亂，

所以。。IE9不能在tr標(biāo)簽中使用template標(biāo)簽

7、純色svg轉(zhuǎn)換成字體(用了panda這個(gè)軟件)，跟預(yù)期不符

這個(gè)應(yīng)該是跟svg的描繪路徑什么的有關(guān)，讓設(shè)計(jì)師同學(xué)重新出一個(gè)圖吧。。

8、一個(gè)奇葩bug，開發(fā)環(huán)境elementUI的表格排序圖標(biāo)不顯示，但是在線上環(huán)境和其他同事的開發(fā)環(huán)境沒問題

// 是由于mac沒安裝xcode導(dǎo)致依賴包install出錯(cuò)(出錯(cuò)了居然還能啟動(dòng)。。)

// 輸入以下命令，如果沒安裝xcode系統(tǒng)就會(huì)提示你安裝了

// npm rebuild node-sass --force

后來又出現(xiàn)了問題， 然后我升級(jí)了npm版本解決

9、el-table用v-if隱藏顯示列和預(yù)期不符問題

給el-table-column加一個(gè)key屬性，:key="Math.random()"或者其他的，確保每列的key值不同就可以了

10、在使用el-table的時(shí)候有的時(shí)候需要對(duì)表格中的數(shù)據(jù)做處理，需要用到filter，雖然官方也有提供過濾的方法(filter-method)，但是還是用自定義列，然后用filter復(fù)用性好一些

{{scope.row.date | dateConvert}}

11、在使用el-table的時(shí)候，有時(shí)候需要自定義表頭，比如在表頭中加個(gè)問號(hào)，然后hover有個(gè)提示信息

這里就需要用到官方提供的render-header屬性了，首先給需要自定義表頭的列加一個(gè)屬性，綁定一個(gè)方法

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報(bào)錯(cuò)“nodelist為對(duì)象，不支持forEach屬性”

因?yàn)閕e認(rèn)為NodeList是一個(gè)對(duì)象，不支持forEach方法遍歷，解決方法很簡(jiǎn)單

// es6寫法

let nodeList = [...this.$el.querySelectorAll('[id^=productItem]')]

// es5寫法

let nodeList = Array.prototype.slice.call(this.$el.querySelectorAll('[id^=productItem]'))

總結(jié)

以上是生活随笔為你收集整理的vue 项目难点_vue项目中遇到的问题汇总的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。