vue 项目难点_vue项目中遇到的问题汇总
前:項(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 手机fast boot什么意思
- 下一篇: vue根据url获取内容axios_vu