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

时间:2020-8-24 作者:admin

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>

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

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。