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()
})
5、mounted钩子函数中请求数据导致页面闪屏问题
其实就是加载时机问题,放在created里会比mounted触发早一点,如果在页面挂载完之前请求完成的话就不会看到闪屏了