ดาวน์โหลด vue json form - ดาวน์โหลด vue json form ซอร์สโค้ด

vue json form

หมวดหมู่อื่นๆ

v0.0.1

ดาวน์โหลด

vue-json-แบบฟอร์ม

ฐาน vue-json-form บน Vue2 และ ElementUI

วิธีใช้

 npm install @vue-json/vue-json-form

การตั้งค่าโครงการ

 npm install

เริ่มโครงการ

 npm start

การใช้งาน

 // main.js
import '@vue-json/vue-json-form' ;
import '@vue-json/vue-json-form/index.css' ;

 <!-- html -->
< vue-json-form v-model =" formData " :list =" list " vid =" vid-test " > </ vue-json-form >
< el-button vid =" vid-test " v-onsubmit =" onSubmit " type =" primary " > submit </ el-button >

 export default {
  data ( ) {
    return {
      formData : {
        color : '#F0F0F0'
      } ,
      list : [
        {
          type : 'input' ,
          label : 'nickname' ,
          field : 'nickname' ,
          rules : {
            required : true ,
            valid : ( { value , formData } ) => {
              if ( value . includes ( 'null' ) ) {
                return {
                  matched : false ,
                  message : 'Null is not allowed'
                } ;
              }
              return { matched : true } ;
            }
          }
        } ,
        {
          type : 'input-number' ,
          label : 'count' ,
          field : 'count' ,
          rules : { required : true , num : true }
        } ,
        {
          type : 'radio' ,
          label : 'type' ,
          field : 'type' ,
          rules : { required : true } ,
          options : [
            { label : 'type1' , value : 1 } ,
            { label : 'type2' , value : 2 }
          ]
        } ,
        {
          type : 'select' ,
          label : 'province' ,
          field : 'province' ,
          rules : { required : true } ,
          optionsAsync : async ( ) => {
            return new Promise ( ( resolve ) => {
              setTimeout ( ( ) => {
                resolve ( [
                  { label : 'London' , value : 1 } ,
                  { label : 'New York' , value : 2 }
                ] )
              } , 300 ) ;
            } )
          }
        } ,
        {
          type : 'switch' ,
          label : 'open' ,
          field : 'isOpen' ,
          rules : { required : true } ,
          // vif control showOrHide
          vif : ( formData ) => formData . type === 1
        } ,
        {
          type : 'daterange' ,
          label : 'daterange' ,
          field : 'dateRange' ,
          rules : { required : true } ,
          attrs : {
            startField : 'beginDate' ,
            endField : 'endDate'
          }
        } ,
      ]
    } ;
  } ,
  methods : {
    async onSubmit ( valided , { formData } ) {
      if ( ! valided ) return ;
      // TOTO:
      console . log ( formData ) ;
    }
  }
} ;