iview Modal对话框点击确定按钮后不关闭，自定义事件

在有些情况下，我们需要一个弹框，iview Modal对话框可以实现，但是我们需要改造

自定义页脚后可避免其关闭

代码如下：

<Modal
        title="车辆信息"
        width="1100"
        v-model="modalVehiclePlain"
        class-name="vertical-center-modal">
  <Form ref="vehicle" :model="vehicle" :rules="ruleValidate" label-width="200" inline class="vehicle">
    <Row>
      <Col span="12">
        <FormItem :label="$t('vehicle_no')" prop="vehicle_no">
          <Input v-model="vehicle.vehicle_no" :placeholder="$t('input_vehicle_no')" ></Input>
        </FormItem>
      </Col>
      <Col span="12">
        <FormItem :label="$t('company_name')" prop="company_name">
          <Input v-model="vehicle.driver_company_name" :placeholder="$t('input_driver_company_name')"  ></Input>
        </FormItem>
      </Col>
    </Row>
    <Row>
      <Col span="12">
        <FormItem :label="$t('driver_name')" prop="driver_name">
          <Input v-model="vehicle.driver_name" :placeholder="$t('input_driver_name')" ></Input>
        </FormItem>
      </Col>
      <Col span="12">
        <FormItem :label="$t('driver_idcard')" prop="driver_idcard">
          <Input v-model="vehicle.driver_idcard" :placeholder="$t('input_driver_idcard')"  ></Input>
        </FormItem>
      </Col>
    </Row>
    <Row>
      <Col span="12">
        <FormItem :label="$t('driver_tel')" prop="driver_tel">
          <Input v-model="vehicle.driver_tel" :placeholder="$t('input_driver_tel')" ></Input>
        </FormItem>
      </Col>
      <Col span="12">
        <FormItem :label="$t('vehicle_type')" prop="vehicle_type">
          <Select v-model="vehicle.vehicle_type" filterable >
            <Option v-for="item in vehicleList" :value="item.id" :key="item.id" :label="item.name">
              <span>{{ item.name }}</span>
              <span style="float:right;color:#ccc">{{ item.id }}</span>
            </Option>
          </Select>
        </FormItem>
      </Col>
    </Row>
    <Row v-if="vehicle.vehicle_type == 1">
      <Col span="24">
        <FormItem :label="$t('vehicle_weight')" prop="vehicle_weight">
          <Input v-model="vehicle.vehicle_weight" :placeholder="$t('input_vehicle_weight')"  ></Input>
        </FormItem>
      </Col>
    </Row>
    <Row v-if="vehicle.vehicle_type == 2">
      <Col span="12">
        <FormItem :label="$t('container_type')" prop="container_type">
          <Select v-model="vehicle.container_type" filterable >
            <Option v-for="item in container" :value="item.id" :key="item.id" :label="item.name">
              <span>{{ item.name }}</span>
              <span style="float:right;color:#ccc">{{ item.id }}</span>
            </Option>
          </Select>
        </FormItem>
      </Col>
      <Col span="12">
        <FormItem :label="$t('container_weight')" prop="container_weight">
          <Input v-model="vehicle.container_weight" :placeholder="$t('input_container_weight')"  ></Input>
        </FormItem>
      </Col>
    </Row>
    <Row v-if="vehicle.vehicle_type == 2">
      <Col span="12">
        <FormItem :label="$t('vehicle_id_number')" prop="vehicle_id_number">
          <Input v-model="vehicle.vehicle_id_number" :placeholder="$t('input_vehicle_id_number')"  ></Input>
        </FormItem>
      </Col>
      <Col span="12">
        <FormItem :label="$t('container_no')" prop="container_no">
          <Input v-model="vehicle.container_no" :placeholder="$t('input_container_no')"  ></Input>
        </FormItem>
      </Col>
    </Row>
    <Row v-if="vehicle.vehicle_type == 2">
      <Col span="12">
        <FormItem :label="$t('vehicle_head_weight')" prop="vehicle_head_weight">
          <Input v-model="vehicle.vehicle_head_weight" :placeholder="$t('input_vehicle_head_weight')"></Input>
        </FormItem>
      </Col>
      <Col span="12">
        <FormItem :label="$t('vehicle_frame_weight')" prop="vehicle_frame_weight">
          <Input v-model="vehicle.vehicle_frame_weight" :placeholder="$t('input_vehicle_frame_weight')" ></Input>
        </FormItem>
      </Col>
    </Row>
  </Form>
  <div slot="footer">
    <Button type="text" @click="modalCancel">取消</Button>
    <Button type="primary" @click="modalSumit">确定</Button>
  </div>
</Modal>

 

也就是官方文档上面的Modal里面，

on-ok= ‘xx’ ，on-cancel=‘xx’去掉，（@on-ok="modalSumit" @on-cancel="modalCancel"）不要保留，直接在外面定义事件

这样就可以定制弹框。