对话框的表单校验——模板笔记

目的：

减少重复工作、简化开发速度

案例：

1.设置一个对话框：

dialog
    width="50%"
    top="60px"
    :title='dialogTitle'
    :visible.sync="dialogVisible"
    :show-close="false"
    :append-to-body="false"
    :close-on-click-modal='false'
    :lock-scroll="false"
>
    <DialogForm
        v-if="newOrEdit"
        :form-info="ruleForm"
        @form-change="formChange"/>
    <aceEditor
        v-if="seeAceEditor"
        :read-only="true"
        :show-content="showJson"
        :options="options"
        style="margin-top: -30px"
    />


computed: {
    formInfo () {
      return {
        type: this.formType,
        repeatName: [],
        form: this.ruleForm
      }
    },
    newOrEdit () {
      return this.dialogTitle === '新建' || this.dialogTitle === '编辑'
    },
    seeAceEditor () {
      return this.dialogTitle === '查看返回协议' || this.dialogTitle === '查看请求协议'
    }
  }

 

2.抽离表单：

 

未完待续...

转载于:https://www.cnblogs.com/wheatCatcher/p/11453423.html