1、视图模板

  1. <a-form
  2.   id="formLogin"
  3.   ref="formLogin"
  4.   :form="form"
  5.   :layout="formLayout"
  6.   @submit="handleSubmit"
  7. >
  8.   <a-form-item>
  9.     <a-input
  10.       size="large"
  11.       type="text"
  12.       placeholder="请输入用户名"
  13.       v-decorator="[
  14.         'username',
  15.         {rules: [{ required: true, message: '请输入用户名' }], validateTrigger: 'change'}
  16.       ]"
  17.     >
  18.       <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
  19.     </a-input>
  20.   </a-form-item>
  22.   <a-form-item>
  23.     <a-input
  24.       size="large"
  25.       type="password"
  26.       autocomplete="false"
  27.       placeholder="请输入密码"
  28.       v-decorator="[
  29.         'password',
  30.         {rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur'}
  31.       ]"
  32.     >
  33.       <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
  34.     </a-input>
  35.   </a-form-item>
  37.   <a-form-item style="margin-top:24px">
  38.     <a-button
  39.       size="large"
  40.       type="primary"
  41.       htmlType="submit"
  42.       class="login-button"
  43.     >确定</a-button>
  44.   </a-form-item>
  45. </a-form>

2、JS脚本

  1. <script>
  2. export default {
  3.   name: 'LoginForm',
  4.   data () {
  5.     return {
  6.       form: this.$form.createForm(this), // 创建form，只要有form组件必须调用该方法
  7.       formLayout: 'vertical' // 表单布局，可以是horizontal、vertical或inline任意一种
  8.     }
  9.   },
  10.   methods: {
  11.     // handler
  12.     handleSubmit (e) {
  13.       e.preventDefault()
  14.       this.form.validateFields((err, values) => { // 表单校验
  15.         if (!err) {
  16.           console.log('Received values of form: ', values)
  17.         }
  18.       })
  19.     }
  20.   }
  21. }
  22. </script>

3、CSS样式

  1. <style lang="less" scoped>
  2. .login-button {
  3.   display: block;
  4.   margin: 15px 10px;
  5. }
  6. </style>