前言

公司在使用vue搭配elementui开发后台系统，中间遇到了大大小小的“坑”，需要总结下，以防后期遇到。

一、elementui的键盘回车事件导致页面刷新

elementUi提供了输入框的键盘事件：@keyup.enter.native="callOut"

例如：<el-form><el-input placeholder="输入号码回车即可呼叫" v-model="num" @keyup.enter.native="callOut"></el-input></el-form>

现在这个form里只有一个input，你回车,它竟然没有触发事件，而是刷新页面了，而且放两个input就没问题了，

W3C标准的说法是：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 标签上添加@submit.native.prevent。

所以我们给form表单上加一个@submit.native.prevent  :

：<el-form @submit.native.prevent ><el-input placeholder="输入号码回车即可呼叫" v-model="num" @keyup.enter.native="callOut"></el-input></el-form>

搞定!

二、input等的placeholder在ie下失效

本地好好的，但是打包之后发到测试环境发现，input里的placeholder竟然不是灰色的，就好像已经输入了文字一样,也不光是input的，所有用的placeholder的标签都是黑色的，应该是ie对placeholder支持性差导致的

ie下placeholder变成黑色

解决方案：

在vue项目引用的index.css里加上
// 兼容placeholder ::-moz-placeholder{color:#c0c4cc;} //Firefox ::-webkit-input-placeholder{color:#c0c4cc;} //Chrome,Safari :-ms-input-placeholder{color:#c0c4cc;} //IE

再打包，发布测试，打开，搞定，都是灰色的了

placeholder变成灰色,搞定

三、待补充...