ElementUI电商项目实践

elementUI的简单使用

安装elementUI之后在main .js中导入并注册

然后在相应的组件中即可使用

使用效果如图

添加前缀后缀图标，前缀prefix-icon

添加后效果

如果使用第三方的图标，比如阿里的，先导入对应的图标样式表

如

导入字体图标

import './assets/fonts/iconfont.css'

然后在对应的组件中先加一个iconfont基础类 后面+ 粘贴的图标名称

prefix-icon="iconfont icon-user"

登录表单的数据绑定

成功绑定样式：

登录表单的数据验证

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。校验规则参见 async-validator

1. 通过属性绑定:rules指定一个rules对象

2. 在data中定义这个校验对象rules:{}每个属性都是验证规则

3. 通过prop指定不同的校验规则

   注意：验证规则是加给item的，不是加给文本框的

   

   

   效果：

   1. 

表单的重置

resetFields：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果

所以只要拿到表单的实例对象，然后调用resetFields即可

加ref即可拿到实例

1.表单添加ref属性

2.重置按钮绑定事件

3.函数内使用this.$refs.ref属性名.resetFields()

登录前预验证

发起请求时，对表单进行预验证，点击登录时

1.绑定登录事件

2.拿到引用对象，调用validate

3.validate接受一个回调函数

   login() {
      this.$refs.loginFormRef.validate((valid) =>{
        console.log(valid)
      })
    }

登录组件配置弹窗提示

1.导入Message

2.挂载到Vue的原型对象上

3.使用