网站开发实用案例教程,杭州做网站怎么收费,林芝企业网站建设公司,邢台手机网站建设报价当你使用Vue.js构建Web应用时#xff0c;封装可复用组件是提高开发效率和代码可维护性的关键之一。在这篇文章中#xff0c;我们将探讨如何使用Vue.js来创建一个通用的表单组件#xff0c;以及如何将它封装成一个可配置的组件。
实现思路
拿下表单模板一个个的改造#x…当你使用Vue.js构建Web应用时封装可复用组件是提高开发效率和代码可维护性的关键之一。在这篇文章中我们将探讨如何使用Vue.js来创建一个通用的表单组件以及如何将它封装成一个可配置的组件。
实现思路
拿下表单模板一个个的改造文本下拉单选复选等按钮默认值的设定rules规则的处理
创建通用的form组件
这段代码是一个Vue.js组件用于创建一个动态表单。以下是对代码的简要解释
1. 在模板部分使用el-form创建一个表单绑定了ruleForm对象作为数据模型和rules对象作为验证规则。 2. 使用v-for循环遍历data.items根据每个item的类型创建不同的表单元素如输入框、选择框、开关、多选框、单选框、文本域、日期选择器和时间选择器。 3. 在el-form-item内部根据item.type的不同使用Vue指令v-if来渲染不同的表单元素。 4. 在脚本部分定义了一个Vue组件接受一个data对象作为属性传递进来初始化了ruleForm和rules对象。 5. 在created生命周期钩子中调用init方法初始化表单的默认值和验证规则。 6. init方法根据每个item的类型将默认值设置到ruleForm中。 7. 定义了callSeif方法用于处理按钮的点击事件包括提交表单和重置表单。 8. submitForm方法通过validate函数验证表单的有效性如果通过验证则执行回调函数。 9. resetForm方法用于重置表单根据不同的表单元素类型清空表单字段。
这段代码用于创建一个可配置的动态表单通过传入不同的配置数据可以生成不同类型的表单并在用户交互时执行相应的操作。这是一个强大的工具可用于快速构建各种表单页面。如果需要更详细的文章请提供具体的方向或问题。
templateel-form :modelruleForm :rulesrules refruleForm :label-widthdata.widthel-form-item :labelitem.label :propitem.prop v-for(item, k) in data.items :keykel-input v-ifitem.type Input v-modelruleForm[item.prop] :placeholderitem.placeholder:style{ width: item.width }/el-inputel-select v-modelruleForm[item.prop] v-ifitem.type Select :placeholderitem.placeholder:style{ width: item.width }el-option v-for(o, i) in item.options :labelo.label :valueo.value :keyi/el-option/el-selectel-switch v-modelruleForm[item.prop] v-ifitem.type Switch/el-switchel-checkbox-group v-modelruleForm[item.prop] v-ifitem.type Checkboxel-checkbox :labelo.value v-for(o, i) in item.options :keyi{{item.label}}/el-checkbox/el-checkbox-groupel-radio-group v-modelruleForm[item.prop] v-ifitem.type Radioel-radio :labelo.value v-for(o, i) in item.options :keyi{{item.label}}/el-radio/el-radio-groupel-col :spanitem.span || 11el-input v-ifitem.type Textarea v-modelruleForm[item.prop] :placeholderitem.placeholdertypetextarea/el-input/el-colel-col :spanitem.span || 5el-date-picker typedate stylewidth: 100% v-modelruleForm[item.prop] :placeholderitem.placeholderv-ifitem.type Date/el-date-picker/el-colel-col :spanitem.span || 5el-time-picker stylewidth: 100% v-modelruleForm[item.prop] :placeholderitem.placeholderv-ifitem.type Time/el-time-picker/el-colel-col :spanitem.span || 5el-date-picker typedatetime stylewidth: 100% v-modelruleForm[item.prop] :placeholderitem.placeholderv-ifitem.type Datetime/el-date-picker/el-col/el-form-itemel-form-itemel-button :typeb.type clickcallSeif(ruleForm, b.action, b.call) v-for(b, k) in data.buttons :keyk{{b.label }}/el-button/el-form-item/el-form
/template
script
export default {props: {data: Object,},name: Form,data() {return {ruleForm: {},rules: {},};},created() {this.init();},methods: {init() {let form {};let box [];this.data.items.forEach((item) {switch (item.type) {case Checkbox:if (item.default) {if (Array.isArray(item.default)) {box box.concat(item.default);} else {box.push(item.default);}}form[item.prop] box;break;case Datetime:if (item.default) {form[item.prop] new Date(item.default);}break;case Time:if (item.default) {form[item.prop] new Date(item.default);}break;case Date:if (item.default) {form[item.prop] new Date(item.default);}break;default:form[item.prop] item.default;break;}});this.ruleForm form;console.log(form);this.rules this.data.rules},callSeif(formName, action, callback) {if (action submit) {this.submitForm(formName, callback);} else if (action reast) {this.resetForm(formName);} else {callback callback();}},submitForm(formName, callback) {this.$refs[formName].validate((valid) {if (valid) {callback callback(this.ruleForm);} else {console.log(error submit!!);return false;}});},resetForm(formName) {console.log(重置,);let form {};this.data.items.forEach((item) {switch (item.type) {case Checkbox:form[item.prop] [];break;default:form[item.prop] ;break;}});this.ruleForm form;this.$refs[formName].resetFields();console.log(this.ruleForm);},},
};
/script如何使用这个组件
现在让我们看看如何在Vue.js应用中使用这个通用的表单组件。首先你需要导入这个组件并注册它然后可以在模板中使用它。
templatediv classtable-pageForm :dataformData/Form/div
/template
script
import Form from ./componentsdemo/form.vue;
export default {name: Index,components: {Form,},data() {return {formData: {width: 180px,items: [{type: Input,label: 活动名称,prop: name,width: 100px,placeholder: 请输入活动区域,default: 请,},{type: Select,placeholder: 请选择活动区域,prop: region,label: 活动区域,options: [{label: 区域一,value: shanghai,},{label: 区域二,value: beijing,},],default: shanghai,},{type: Switch,label: 即时配送,prop: delivery,default: true,},{type: Checkbox,label: 活动性质,prop: type,options: [{label: 线下主题活动,value: 1,},{label: 单纯品牌曝光,value: 2,},],default: [1, 2],},{type: Radio,label: 特殊资源,prop: resource,options: [{label: 线下主题活动,value: a,},{label: 单纯品牌曝光,value: b,},],default: a,},{type: Textarea,label: 活动形式,prop: desc,placeholder: 请输入活动形式,span: 10,default: 活动,},{type: Date,label: 活动日期,prop: data1,placeholder: 请输入活动日期,span: 10,default: 2023-08-21,},{type: Time,label: 活动时间,prop: data2,placeholder: 请输入活动时间,span: 10,default: 2023-08-21 12:00:00,},{type: Datetime,label: 活动日期时间,prop: data3,placeholder: 请输入活动日期时间,span: 10,default: 2023-08-21 12:00:00,},],buttons: [{label: 确定,type: text,action: submit,call: (Form) {console.log(Form);},},{label: 重置,type: text,action: reast,call: () {console.log(reast);},},],rules: {// name: [// { required: true, message: 请输入活动名称, trigger: blur },// { min: 3, max: 5, message: 长度在 3 到 5 个字符, trigger: blur },// ],region: [{ required: true, message: 请选择活动区域, trigger: change }],date1: [{ type: date, required: true, message: 请选择日期, trigger: change },],date2: [{ type: date, required: true, message: 请选择时间, trigger: change },],type: [{type: array,required: true,message: 请至少选择一个活动性质,trigger: change,},],resource: [{ required: true, message: 请选择活动资源, trigger: change }],desc: [{ required: true, message: 请填写活动形式, trigger: blur }],}},};},methods: {},
};
/script在上述示例中我们首先导入了通用下拉选择框组件然后在模板中使用它并将需要的数据传递给它。当选择项发生变化时我们可以通过change事件来处理选择结果。
结语
通过封装通用组件我们可以在Vue.js应用中轻松地实现重复使用的功能提高开发效率并减少重复工作。通用表单组件是一个很好的例子它可以根据不同的需求进行配置使其适用于多种情况。希望本文对你理解如何创建和使用Vue.js组件有所帮助
