Vue脚手架系列08-表单组件-设计FormItem组件__Vue.js
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利
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/
版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 徐四 原文链接:https://juejin.im/post/6863773988863246349