使用element-ui实现自己的表单组件

前言最近因为新型冠状病毒，我们只能宅在家里不能出门，比较无聊，所以写了这篇文章使用element-ui实现了自己的一个组件，希望对大家有所帮助！创建项目检查节点环境配置VueCLI需要Node.js8.9或更高版本（推荐8.11.0+）node-vVueversion可以使用以下任一命令来安装这个新包npminstall-g@vue/cli#ORyarnglobaladd@vue/cli查看vue版本vue--versioncreateprojectvuecreatehello-world注：由于我们开发的是第三方依赖库，所以我们选择Manuallyselectfeatures来选择特性并安装到项目中（*)Babel()TypeScript()ProgressiveWebApp(PWA)Support()Router()Vuex(*)CSSPre-processors(*)Linter/Formatter()UnitTesting()E2ETestingwhichCSSpreprocessinglanguagetoinstall(*)Sass/SCSS（带dart-sass）（）Sass/SCSS（带node-sass）（）Less（）StylusChoose代码风格（*）仅带错误预防的ESLint（）ES??Lint+Airbnb配置（）ES??Lint+标准配置（）ESLint+Prettier检测代码格式的方式有哪些？(*)Lintonsave()Lintandfixoncommit是否保存预配置将此保存为未来项目的预设？(y/N)N最后，系统会帮我们生成一个完整的工程。元素集成在项目中使用vue添加元素，首先需要在element.js中导入Form、FormItem和Inputelement.js。最终代码：importVuefrom'vue'import{Button,Form,FormItem,Input}from'eelement-ui'Vue.use(Button)Vue.use(Form)Vue.use(FormItem)Vue.use(Input)组件用于创建登录表单并可以验证用户输入App.vue

data(){return{value:'',model:{username:"ming",password:""},rules:{username:[{required:true,message:"Pleaseenterausername"},{min:6,max:10,message:"Pleaseenterausernamefrom6to10"},],password:[{required:true,message:"请输入密码”}]，}};},methods:{submitForm(form){this.$refs[form].validate(valid=>{if(valid){alert('Loginrequested!')}else{alert('Validationfailed!')}})}}运行效果：组件设计实现Input、Form、FormItem实现InputApp.vue通过v-model进行双向数据绑定，其中v-model绑定value并监听输入事件importKInputfrom'./components/input'exportdefault{name:'app',components:{KInput},}components/input.vue运行效果实现FormItemApp.vueimportKInputfrom'./components/input'importKFormItemfrom'./components/FormItem'exportdefault{name:'app',components:{KInput,KFormItem},components/FormItem.vue<模板>

{{label}}

{{errMessage}}

运行结果现实FormApp.vue从'./components/input'导入KInput从'./components/FormItem'导入KFormItem从'./components/Form'导入KForm导出默认值{name:'app',components:{KInput,KFormItem,KForm},components/Form.vue运行效果代码地址https://github.com/shifengming/element-form最后如果这样文章如果对你有帮助，请为本文点个赞??????欢迎大家加入，一起学习前端，一起进步！