vue+elementUI 开发总结

前言

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

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

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

例如:

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

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

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

搞定!

二、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变成灰色,搞定

三、待补充...

你可能感兴趣的:(vue+elementUI 开发总结)