hhh-ui

Github – This is a secondary encapsulation based elementUI component that can quickly implement the form functionality you want! If it helps you, don’t forget to give a star, hahaha. As I continue to update, I have updated a new version of this component with more functionality and clearer documentation.

Install the HHH – UI

cnpm install hhh-ui -S
Copy the code

Global registration (referenced in main.js) :

import HhhUi from 'hhh-ui'
Vue.use(HhhUi)
Copy the code

Page reference

<hhh-form ref="myform" :reformRule="reformRule" :formData="formData" reform="reform"></hhh-form>
Copy the code

Props:

Reform: form ref attribute reformRule: form validation rule default, {} eg: {phone: [{required:true, message:'Error message', trigger: 'blur'}, or {validator: custom validator, see Element's validator, required:true,// Whether trigger:'blur'}],} formData: form value, Array Mandatory eg:[{name:"Input field"// Text labeltype: "input", / / input, select, textarea, checkbox, radio, time and citypicker field:"id", // the value of this field is:' '// The initial value of the input box isshow:false// display width:false, // Text width disabled:false, // whether placeholder is disabled:"Please enter", // placeholder hint multiple:falseCheckbox filterable:false{// Check the interface data dynamically based on the select, checkbox method: {// check the interface data dynamically based on the select, checkbox method:'get'// Request type url:'www.xx.cn'// Interface address data: {},// request parameter label:'label',// Drop down the selection box selection text value:'value',// Drop down the selected value callback:function(data) {// The interface returns data hierarchy processingreturn data
              },
            }
          }
        ]
Copy the code

Write a thick super page, the effect is as follows:

Code implementation:

<template>
      <hhh-form ref="myform" :reformRule="reformRulea" :formData="formDataA" reform="reform"></hhh-form>
      <div class="btn" @click="saveform"> Save </div> </template>export default {
    data() {
        return {
            formDataA: [
                {
                  type: "input", // Common input field:"phone",
                  name: "Mobile phone Number:",
                  divwidth:"100%",
                  width:'460',
                  value: ""
                },
                {
                  type: "input", // Common input field:"username",
                  name: "Name:",
                  divwidth:"100%",
                  width:'460',
                  value: ""
                },
                {
                  value: "",
                  divwidth:"100%",
                  width:'460'.type: "select", // Normal dropdown field:"status",
                  name: "Gender:,
                  options: [
                    {
                      label: "Male",
                      value: 0
                    },
                    {
                      label: "Female",
                      value: 2
                    }
                  ]
                },
                {
                  value: "",
                  divwidth:"100%",
                  width:'460'.type: "radio", // select field:"status",
                  name: "Gender:,
                  options: [
                    {
                      label: "Male",
                      value: 0
                    },
                    {
                      label: "Female",
                      value: 2
                    }
                  ]
                }
              ],
              reformRulea:{
                phone: [
                  {
                    validator: FormValidate.phone,
                    required: true,
                    trigger: 'blur'
                  }
                ],
                username: [
                  {
                    validator: FormValidate.username,
                    required: true,
                    trigger: 'blur'
                  }
                ],
                businessName: [
                  {
                    validator: FormValidate.businessName,
                    required: true,
                    trigger: 'blur'}}}, methods: {saveform() {
            let formData = this.$refs.myform.submitForm(); / / thenforPut Data in your Ajax request}}}Copy the code

If this article helped you, give it a like, hahaha