阅读 716

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

1.Form-Item组件:

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

  • 绑定 labelprop 属性
  • 获取当前输入框的规则
  • 如果输入框和 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>
复制代码

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

文章分类
前端
文章标签