vue之詞法分析

基於vue的詞法分析

主要是通過給定不同的json格式的資料，生成對應的模組

應用場景有時候會有後端給傳json格式的資料，前端通過資料生成對應的模組

開發技術 vue + element-ui

如上圖所示的json資料，type代表模組的型別。支援input ，radio ，option等等

label代表模組名字，rule代表校驗的格式 ，值a，b，c代表名字，這個試例子中，你給我穿a,b,c我會給你返回key為a，b，c的json串，在dialog中點選確認會輸出！

當貼上如圖所示的json，會生成

初始化的程式碼:

 initData () {
      for (let val in this.ObJson) {
        if (this.ObJson[val]['type'] === 'checkbox') {
          this.$set(this.ruleForm, val, [])
        } else {
          this.$set(this.ruleForm, val, '')
        }
        if (this.ObJson[val].myval) {
          this.$set(this.ruleForm, val, this.ObJson[val].myval)
        }
      }
    }
複製程式碼

模板的程式碼:

      <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item :label="val.label" :prop=" ''+index" v-for="(val,index) in ObJson" :key="index" :rules="showrules(val.rule)">
          <el-col :span="11">
            <el-input v-if="val.type === 'input'" :type="val.inputtype||'input'" v-model="ruleForm[index]"></el-input>
            <el-radio-group v-if="val.type === 'radio'" v-model="ruleForm[index]">
              <el-radio v-for="(radioVal,radioIndex) in val.children" :key="radioIndex" :label="radioIndex">{{radioVal}}</el-radio>
            </el-radio-group>
            <el-select v-if="val.type === 'option'" v-model="ruleForm[index]" placeholder="請選擇學歷">
              <el-option :label="optionIndex" :value="optionVal" v-for="(optionVal,optionIndex) in val.children" :key="optionIndex"></el-option>
            </el-select>
            <el-date-picker v-if="val.type === 'datepicker'" type="date" placeholder="選擇日期" v-model="ruleForm[index]"></el-date-picker>
            <el-checkbox-group v-if="val.type === 'checkbox'" v-model="ruleForm[index]">
              <el-checkbox :label="checkboxIndex" :value="checkboxIndex" name="type" v-for="(checkboxVal,checkboxIndex) in val.children" :key="checkboxIndex"></el-checkbox>
            </el-checkbox-group>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即建立</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
複製程式碼

以及一些常用的校驗和替換:

 validateId (rule, value, callback) {
      // 身份證號碼為15位或者18位，15位時全為數字，18位前17位為數字，最後一位是校驗位，可能為數字或字元X
      let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
      if (reg.test(value) === false) {
        callback(new Error('身份證輸入不合法'))
      } else {
        callback()
      }
    },
    validateMobile (rule, value, callback) {
      let myreg = /^[1][3,4,5,7,8][0-9]{9}$/
      if (!myreg.test(value)) {
        callback(new Error('手機號輸入不合法'))
      } else {
        callback()
      }
    }
複製程式碼

生成的效果圖 ：

這是對應的程式碼 github 的連結， 個人覺得雖然看起來聽low的，但是還是挺有收穫的，比如vue的set，哈哈！如果你也是剛學習vue的小白，點點看吧，記得上github上給個star，感謝！