Vue脚手架系列08-表单组件-设计FormItem组件

1.Form-Item组件：

在设计FormItem组件的时候需要注意以下几点：

• 绑定label和prop属性
• 获取当前输入框的规则
• 如果输入框和ruler不匹配，显示错误信息
• Input组件中，用户输入内容的时候，通知FormItem的做校验（校验的方法）
• 使用async-validate做校验

🍊下面来看下FormItem组件：

<template>
    <div>
         <!--如果有label显示，没有就隐藏 -->
        <label v-if="label">{{label}}</label>
         <!-- slot插槽，用于放input组件的-->
        <slot></slot>
        <!-- 显示校验的错误信息-->
        <p v-if="validateStatus==='error'" class="error">{{errorMessage}}</p>
    </div>
</template>

<script>
//绑定label和prop属性
//获取当前输入框的规则
//如果输入框和ruler不匹配，显示错误信息
//input组件中，用户输入内容的时候，通知formItem的做校验（校验的方法）
//使用async-validate做校验
export default {
    data() {
        return {
            validateStatus:"",//校验的状态值
            errorMessage:"", //显示的错误信息
        }
    },
    props:{
        label:{
            type:String,
            default:""
        },
        prop:{
            type:String,
            default:""
        }
    }
}
</script>

<style scoped>
    .error{
        color: red;
    }
</style>

2.在Form组件中，使用FormItem完成对Input组件的包裹

<template>
<div>   
<!--这是我们自己的input组件-->
    {{ruleForm}}
    <m-form-item label="年龄" porp="age">
      <m-input type="age" v-model="ruleForm.age"></m-input>
    </m-form-item>
    <m-form-item lable="密码" prop="pass">
      <m-input type="password" v-model="ruleForm.pass"></m-input>
    </m-form-item>
</div>

</template>

<script>
  //引入组件
import MInput from "./Input";
import MFormItem from "./FormItem";

  export default {
    //组件的注册
    components:{
        MInput,
        MFormItem
    },
    data() {
      return {
        ruleForm: {
          pass: '920920',
          checkPass: '',
          age: '18岁'
        },
      };
    },
    methods: {

    }
  }
</script>

😃下一篇将编写，如果处理组件的校验逻辑：

打一波广告，我可是那个要成为海贼王的男人~！：https://www.luffycity.com/