Form component building guide

  • Github:github.com/mr-co-idea/…

design

  • Decoupling: Reduce the coupling of the child components to the Form component, treating the child components as individuals
  • Compose: Form components are composed by combining child components
  • Bidirectional data binding: Data interaction is strictly governed by bidirectional data binding
  • Hook: Exposes methods in components through hook functions
  • Data processing: Data processing functions need to subscribe to the data to be processed, so as to trigger in response

Building child components

  • The benchmark
    • Dynamically set class, eg::class=[config.class || '', 'demo-unit]
    • The parts that need customization can be set in the business page by way of slots
    • Validation hooks are tied to components that need validation using methods in Mouted
  • The new component
    • You are advised to place new components in folders
    • When a component involves data interaction, additional data processing needs to consider whether the current behavior is in observer mode
    • The code is as simple and logical as possible
    • Components need to be documented for development

Form component usage manual

form

  • The component is based on Vant and the validation rules have been refactored
  • FormConfig: indicates the configuration of the component. The type is Map. New Map([[key,val]])
  • Value, form data, can be empty object, two-way data binding
  • Whether the formEdit form is editable, true/false
  • The sample 
    New Map([["input", {label: "input box ", placeholder: "Please input", required: true, leftIcon: "info-o",},], ["select", {label: "Select box ", type: "select", columns: new Map(), placeholder:" Please select", Required: false, leftIcon: "info-o",},],]);Copy the code

Verification (support asynchronous verification)

  • Submit event is triggered after verification, and failed event is triggered after failure (failed event parameter is info that failed verification)
  • Global verification is stored in rules/index.rules.js in the cpt_form folder 
    Rules :{[check name]:true}Copy the code
  • The local registration component passesimport rules from '@rules/index.rules'Introducing the rules, 
    Rules.use ({[custom check name]:function(){return [true/false]}})Copy the code

    You can have more than one object, or you can put more than one property inside an object

  • The child component validates the function hook, which can be obtained by adding a checkHook to val
  • The form component supports full verification, partial verification, and parameter passing{... [key]:true}

Child components

input

  • See vant for the basic properties, or look at the props for the Input component
  • Type is rendered when the default value is null or input. Input -*** is rendered when the default value is input. Eg: input-tel, the type is tel input box
  • See vant for the basic properties, or look at the props for the Input component

select

  • See vant for the basic properties, or look at the props for the Input component
  • The type to select
  • See vant for the basic properties, or look at the props for the Input component
  • Columns are the drop-down options of the component, are of type Map, key is a field, and val is the information to be displayed

load

  • When the type of type – idcard/businesslicense/face of id card, business license, face respectively
  • Add new image upload type-[new upload], added in configloadConfig:new Map()To add a new configuration to the Map

The image named key is placed under Common’s images

period

  • Expiry date selector
  • The type for the period
  • Data format: [startTime]-[endtime]

agree

  • Must be
  • Text in config can add text
  • You can add the name of the current Agree field through the slot

tips

  • Message prompt component
  • Customizable style, using V-HTML for content filling

readTitle

  • Read-only header component
  • Customizable style, use {{}} for content filling

operateTitle

  • Operational title
  • Field name must be [field]-[number] eg:operateTitle-1
  • By default, the first step on the first page and the last page are hidden next
  • The previous and next steps can be customized with preFunc and nextFunc, with func taking precedence over default hiding
  • Page switching can be controlled by changing the Index of the Form component. The default page is Index :1
  • Click Next to trigger all the verification of the current page by default. If the verification fails, the next operation cannot be carried out (custom verification of the current page can be realized by combining with local verification of the form).

The effect

Page sample code

<template> <div> <cpt-form v-model="value" :formEdit="formEdit" :formConfig="formConfig" /> <! -- <van-button @click="$router.push('/test')"> jump </van-button> --> </div> </template> <script> export default {data() { return { formEdit: true, value: {}, formConfig: new Map([ [ "operateTitle-1", { type: "operateTitle", title: "The first page,"},], [" readTitle, "{type:" readTitle ", the title: "title",},], [" tips ", {type: "tips", the text: },], ["input", {label: "input box ", placeholder: "Please input", required: true, leftIcon: "Info-o ",},], ["select", {label: "select box ", type: "select", columns: new Map(), placeholder:" Please select", required: False, leftIcon: "info-o",},], ["period", {label: "ID ", type: "period", placeholder:" Please select ", required: False, leftIcon: "info-o",},], ["operateTitle-2", {type: "operateTitle", title: "second page ",},], ["load", {type: "info-o",},], ["load", {type: "The load - idcard," leftIcon: "info - o," label: "positive and negative identity card upload,"},], [" something ", {type: "something", the text: "I agree...",},],]),}; }}; </script> <style lang="less" scope> </style>Copy the code

Page effect display