Elment-ui常见问题整理

Input事件无法绑定按键事件

原因：el-input被div所包裹，解决办法是在事件后追加native修饰符

<el-input @keyup.enter.native="save" />

回车键刷新页面

原因：

W3C 标准中有如下规定：
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to >submit the form.
即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 标签上添加 @submit.native.prevent。

即回车键触发了form表单提交事件，解决办法是阻止事件即可

 <el-form   @submit.native.prevent>
 </el-form>

scope下覆盖elment-ui样式无效

原因： 使用 scoped 后，父组件的样式将不会渗透到子组件中。
解决方案：使用深度选择器

<style lang="scss" scoped>
.my-color-picker /deep/.el-color-picker{
   		width: 65px;
   		.el-color-picker__color{
   			border: none;
   		}
   		.el-color-picker__trigger{
   			width: 100%;
   		}
   		.el-color-picker__icon{
   			display: none;
   		}
   }
</style>